如何在将鼠标悬停在另一个元素上时更改一个元素答案

【问题标题】：How to change one element while hovering over another如何在将鼠标悬停在另一个元素上时更改一个元素
【发布时间】：2011-12-23 09:43:18
【问题描述】：

我查看了其他几个问题，但我似乎无法弄清楚其中的任何一个，所以这是我的问题：我想要一个 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 中做到这一点，我想知道，但我想要任何和所有建议。

【问题讨论】：

在问题底部查看我的 cmets。那里还有一把小提琴。如果可以选择更改 html 结构 - stackoverflow.com/questions/6669147/…
在 jquery jsfiddle.net/amkrtchyan/e8wJb

标签： html css

【解决方案1】：

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

http://jsfiddle.net/LgKkU/

【讨论】：

【解决方案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。我还添加了一个显示浏览器支持的链接。否则，答案是一样的。

【讨论】：

也有general sibling selectors，但也只对后续元素有效

【解决方案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(){...});）。

【讨论】：

【解决方案4】：

您现在完全可以在 CSS3 中使用 ~ 相邻兄弟选择器来执行此操作。

triggerSelector:hover ~ targetSelector {
    display: block;
}

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

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

【讨论】：