1

那么是否有可能使这项工作

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

喜欢

#element:hover #otherelement {...}

img 保持指定很重要，因为图像在我制作的内容中是自动的。

4

5 回答 5

4

由于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 >
于 2013-08-14T21:02:48.140 回答
2

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

相邻兄弟组合子

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

#element img:hover + #otherelement

如果#otherelement放置在 之后，则在悬停img时将被选中。img

另一种选择是：

一般兄弟组合子

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

#element img:hover ~ #otherelement

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

这是一个例子

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;
}
于 2013-08-14T21:02:26.380 回答
1

您的第一个选择器正在寻找的是在图像#otherelement 内部调用的东西。图片不能有子元素。

如果元素是图像的同级元素，您可能需要尝试img:hover~#otherelement或img:hover+#otherelement。

于 2013-08-14T21:02:53.347 回答
0

是的，请尝试：

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

或者

#element:hover ~ #otherelement {...}
于 2013-08-14T21:02:13.873 回答
0

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

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

于 2013-08-14T21:04:09.920 回答