DEV Community

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

Posted on • Updated on

DIV that is only visible on hover - HTML and CSS

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 (2)

Collapse
wick3drose profile image
wick3dr0se • Edited on

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
web_dev profile image
Web_Codr Author

yes :-)