Skip to main content
added 98 characters in body
Source Link
nathanjosiah
  • 4.5k
  • 4
  • 38
  • 47

Assuming HTML4, with this markup:

<a>Hover over me!</a> <div>Stuff shown on hover</div> 

You can do something like this:

 
div { display: none; } a:hover + div { display: block; }
<a>Hover over me!</a> <div>Stuff shown on hover</div>
div { display: none; } a:hover + div { display: block; } 
 

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.

Assuming HTML4, with this markup:

<a>Hover over me!</a> <div>Stuff shown on hover</div> 

You can do something like this:

 
div { display: none; } a:hover + div { display: block; } 

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.

You can do something like this:

div { display: none; } a:hover + div { display: block; }
<a>Hover over me!</a> <div>Stuff shown on hover</div>
 

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.

Source Link
Yi Jiang
  • 50.2k
  • 16
  • 139
  • 137

Assuming HTML4, with this markup:

<a>Hover over me!</a> <div>Stuff shown on hover</div> 

You can do something like this:

div { display: none; } a:hover + div { display: block; } 

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.