如何将一个元素悬停在另一个元素上

小编典典

如何将一个元素悬停在另一个元素上

html

我已经看过其他几个问题，但似乎无法弄清楚它们中的任何一个，所以这是我的问题，我想要一个div或span，当您将鼠标悬停在它上面时，就会出现一个区域，就像是一滴水下。

例如我有一个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中做到这一点，我想知道，但是我想要任何和所有建议。

阅读 547

2020-05-10

小编典典

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

2020-05-10

小编典典

您不能:hover在CSS2中使用来影响非子元素，所有通用浏览器都支持在CSS2中使用非子元素。

您可以使用CSS2.1选择器来影响同级元素，如下所示：

a:hover + .sibling { ... }

但是，这仅适用于直接同级。这意味着您可以拥有这样的HTML：

<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>

请注意，a和和span是直接同级。

2020-05-18

如何将一个元素悬停在另一个元素上

共2个答案