当有人将鼠标悬停在<a>
元素上时,我想显示一个div ,但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗?
仅使用CSS,将div悬停在上时显示div</p>
第3060篇《仅使用CSS,将div悬停在上时显示div》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>
的HTML 的CSS 根据我使用此CSS进行的测试: 和这个HTML: ,结果是它确实使用第二个展开,但没有使用第一个展开。因此,如果悬停目标和隐藏的div之间有一个div,则它将不起作用。 对我来说,如果我想与隐藏的div交互,而每次离开触发元素时都看不到它消失(在这种情况下为a),则必须添加: 请测试此代码 我想提供这种通用模板解决方案,该解决方案扩展了Yi Jiang提供的正确解决方案。 其他好处包括: 在html中,放置以下结构: 在css中放置以下结构: As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace: with And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information. 这在Internet Explorer 10.0.9200中无法正常工作,在Opera 12.16,Firefox 18.0和Google Chrome 28.0.15中工作正常。 有关带有弹出式多级菜单的完整示例,请参见小提琴http://jsfiddle.net/F68Le/。 由于这个答案很受欢迎,我认为需要做一个小小的解释。当您将鼠标悬停在内部元素上时,使用此方法将不会消失。因为.showme位于.showhim内部,所以当您在两行文本(或任何两行文本)之间移动鼠标时,它不会消失。 这些是在实现此类行为时需要注意的quirq的示例。 这完全取决于您需要什么。此方法适用于菜单样式的方案,而Yi Jiang的适用于工具提示。 我发现使用opacity更好,它允许您添加css3过渡以达到很好的悬停效果。转换将仅由较旧的IE浏览器删除,因此可以正常降级。<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
div+div {
display: none;
}
div:hover +div {
display: block;
}
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>
div:hover {
display: block;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:blue;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:white;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
a:hover + div{
display:inline;
}
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>
<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
</div>
div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
需要注意的几点是:
Hover Over The Popup
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
div.information_popup_container > div.information:hover + div.popup_information
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
相似问题
问题类别
别忘了 如果您要在图像上悬停,则必须将其放在容器周围。CSS:
如果您将鼠标悬停在此:
这将显示: