DEV Community

loading...
Cover image for DIV that is only visible on hover - HTML and CSS

DIV that is only visible on hover - HTML and CSS

coder_bishal profile image Coder_Bishal Updated on ・1 min read

DIV only visible on hover is made with HTML and CSS. They are usually used to show/make a DIV visible on hover. When a div becomes visible on hover, it gives your site a nice look.
View it on our website

At first, on our webpage, there is the overview of our blog then there is the example of DIV only visible on hover . When you click on view code after visiting our website the whole code will appear, there is a also a button to copy the codes (HTML and CSS).

You can view and copy the source code files through the link given below. View and Copy Source Code

Discussion

pic
Editor guide
Collapse
wick3drose profile image
wick3dr0se

This is actually very simply done in multiple different ways. Some of the more notable ways excluding Javascript. Let's say you want a menu to show on hover. You can easily set it to menu {visibility:hidden;} menu:hover {visibility:visible;} to achieve that affect. Sometimes may need to set block element to make it work; Otherwise an onclick event can be implement in HTML to show the element when clicked so in CSS you would hide it. With Javascript you add on many, many ways we can hide and show elements on hover but it will delay the page more and a lot of people like myself use NoScript

Collapse
coder_bishal profile image