如何使用CSS更改一个元素同时悬停在另一个元素上

zaq34kh6 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(274)

我已经看了其他几个问题，但我似乎不能解决他们中的任何一个，所以这里是我的问题：我想有一个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中做到这一点，我想知道，但我希望任何和所有的建议。

css

来源：https://stackoverflow.com/questions/8614423/how-to-change-one-element-while-hovering-over-another-with-css

4条答案

按热度按时间

qvtsj1bj1#

只有当隐藏的div是用于悬停的元素的子元素时，才能在CSS中实现这一点：
http://jsfiddle.net/LgKkU/

赞(0）回复(0）举报 2023-03-20

qvk1mo1f2#

您不能在CSS2中使用: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。我还添加了一个显示浏览器支持的链接。除此之外，答案是相同的。

赞(0）回复(0）举报 2023-03-20

mpgws1up3#

或者，如果您愿意，可以使用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
    });

记住要将其 Package 在一个DOM就绪函数（$(function(){...});或$(document).ready(function(){...});）中。

赞(0）回复(0）举报 2023-03-20

yfwxisqw4#

现在，您完全可以在CSS3中使用~相邻同级选择器来完成此操作。

triggerSelector:hover ~ targetSelector {
    display: block;
}

例如，如果希望在将鼠标悬停在相邻按钮上时显示工具提示：

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

赞(0）回复(0）举报 2023-03-20

我来回答

如何使用CSS更改一个元素同时悬停在另一个元素上

4条答案

相关问题

热门标签

最新问答