Question

我已经看了几个其他的问题，但我似乎无法找出它们中的任何一个，所以这是我的问题，我想有一个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中这样做，我想知道，但我想要任何和所有的建议。

Answer 1

只有当隐藏的div是您用于悬停的元素的子元素时，才能在CSS中实现此目的：

http://jsfiddle.net/LgKkU/

Answer 2

您不能使用CSS2中的:hover来影响非子元素，这是所有常见浏览器都支持的。

您可以使用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/

但是，not all browsers support the CSS2.1 sibling selectors，您需要根据目标受众决定是否可以使用此功能。

编辑：更正了我在+选择器的CSS版本上的错误：定义它的是2.1，而不是CSS3。我还添加了一个显示浏览器支持的链接。否则，答案是一样的。

Answer 3

或者，如果您愿意，请使用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(){...});）。

Answer 4

现在您可以使用~相邻的同级选择器在CSS3中绝对做到这一点。

triggerSelector:hover ~ targetSelector {
    display: block;
}

例如，如果要在悬停在相邻按钮上时显示工具提示：

.button:hover ~ .tooltip {
    display: block;
}

如何在悬停在另一个元素上时更改一个元素

4 个答案: