我已经看了几个其他的问题,但我似乎无法找出它们中的任何一个,所以这是我的问题,我想有一个div或跨度,当你将鼠标悬停在它上面时会出现一个区域,就像一滴下.
比如我有一个div,我想将它悬停在它上面并让它显示一些关于我徘徊的项目的信息
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p><a href="#">Cheetah</a></p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
但这^似乎没有用,我不知道为什么......如果有一种方法可以在css中这样做,我想知道,但我想要任何和所有的建议.
Ove*_*ous 17
您不能:hover在CSS2中使用所有常见浏览器支持的非子元素.
您可以使用CSS2.1选择器影响兄弟元素,如下所示:
a:hover + .sibling { ... }
但是,这仅适用于直接兄弟姐妹.这意味着您可以使用以下HTML:
<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>
请注意,a和span是直接的兄弟姐妹.
这是一个显示兄弟姐妹工作的小提琴:http://jsfiddle.net/vUUxp/
但是,并非所有浏览器都支持CSS2.1兄弟选择器,因此您需要根据目标受众决定是否可以使用此选项.
编辑:更正了我在+选择器的CSS版本上的错误:定义它的是2.1,而不是CSS3.我还添加了一个显示浏览器支持的链接.否则,答案是一样的.
Pur*_*rag 10
或者,如果您对它开放,请使用jQuery.
像这样的东西会起作用:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
并记住将其包装在DOM就绪函数($(function(){...});或$(document).ready(function(){...});)中.
现在，您绝对可以使用~相邻的同级选择器在 CSS3 中执行此操作。
triggerSelector:hover ~ targetSelector {
display: block;
}
例如，如果您希望将鼠标悬停在相邻按钮上时显示工具提示：
.button:hover ~ .tooltip {
display: block;
}