我可以使用 img:hover 来获取另一个元素吗？答案

【问题标题】：Can I use img:hover to get another element?我可以使用 img:hover 来获取另一个元素吗？
【发布时间】：2013-08-15 05:45:36
【问题描述】：

那么有没有可能做到这一点

#element img:hover #otherelement {...}

喜欢

#element:hover #otherelement {...}

img 保持指定很重要，因为图像在我制作的过程中是自动生成的。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

由于img 不能容纳任何其他嵌套标签，我假设您的目标是相邻元素，您可以在此处使用相邻选择器+

#element img:hover + #otherelement {...}

上面的选择器会在图片悬停时选择img标签旁边的元素。

注意：上面的选择器只有在你的标记像这样时才能工作

<div id="element">
   <img src="#" />
   <div  id="otherelement"></div >
</div >

但是如果你有这样的标记就会失败

<div id="element">
   <img src="#" />
</div >
<div  id="otherelement"></div >

【讨论】：

【解决方案2】：

您可以通过以下方式选择下一个元素：

相邻兄弟组合子

element1 + element2 选择紧跟在element1 元素之后的每个element2 元素。他们是兄弟姐妹。

#element img:hover + #otherelement

如果#otherelement 紧跟在img 之后，则在img 悬停时会被选中。

另一种选择是：

通用兄弟组合子

element1 ~ element2 匹配出现在 element1 前面的 element2，但它们具有相同的父级。他们也是兄弟姐妹，但element2 不必紧跟在element1 前面。

#element img:hover ~ #otherelement

如果#otherelement 和img 是兄弟姐妹，并且#otherelement 放置在img 之后的某个位置，则当img 悬停时将被选中。

Here is an example

HTML

<div id="parent">
    <img src="http://lorempixel.com/200/200/" alt="Sport">
    <div class="text">This is a text.</div>
</div>

CSS：

#parent {
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.text {
  position: relative;
  -webkit-transition: .3s all;
  -moz-transition: .3s all;
  transition: .3s all;
  background-color: rgba(255,255,255,.5);
  height: 40px;
  line-height: 40px;
}

#parent img:hover + .text {
  top: -40px;
}

【讨论】：

【解决方案3】：

您的第一个选择器正在寻找一个名为#otherelement inside 的图像。图片不能有子元素。

如果元素是图像的兄弟，您可能想尝试img:hover~#otherelement 或img:hover+#otherelement。

【讨论】：

【解决方案4】：

是的，试试吧：

#element:hover + #otherelement {...}

或

#element:hover ~ #otherelement {...}

【讨论】：

【解决方案5】：

您可以在任何元素上使用 :hover 伪类。在跨浏览器方面需要考虑。不过，您可以使用 Selectivizr 之类的 polyfill。

至于您的问题，您可能需要考虑为您尝试使用悬停定位的两个元素定位一个共享祖先，并以这种方式应用您的样式。

【讨论】：