仅使用CSS，将鼠标悬停在< a>上时显示div [英] Using only CSS, show div on hover over <a>

问题描述

我想显示一个div，当有人悬停在< a> 元素，但我想这样做在CSS而不是JavaScript。

解决方案

您可以执行 this ：

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

 < a>将鼠标悬停在我上面< / a>< div& / div>  
 
 
 
这使用相邻同级选择器，并且是 suckerfish下拉菜单。 
 
 
 
 HTML5允许锚点元素包裹几乎任何东西，因此在这种情况下， div 元素可以成为锚点。否则原则是一样的 - 使用：hover 伪类来更改另一个元素的 display 属性。 
 
I would like to show a div when someone hovers over an <a> element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?
解决方案
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. 

                        
这篇关于仅使用CSS，将鼠标悬停在&lt; a&gt;上时显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！