Question

因此可以使这项工作

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

像

#element:hover #otherelement {...}

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

Answer 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 >

Answer 2

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

相邻的同胞组合子

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

#element img:hover + #otherelement

如果#otherelement位于img之后，img会在element2悬停时被选中。

另一种选择是：

一般兄弟组合器

element1 ~ element2匹配element1在element2之前具有相同父级的出现次数。他们也是兄弟姐妹，但element1不一定要紧接#element img:hover ~ #otherelement。

#otherelement

如果img和#otherelement是兄弟姐妹，并且img位于img之后的某处，则会在<div id="parent"> <img src="http://lorempixel.com/200/200/" alt="Sport"> <div class="text">This is a text.</div> </div>悬停时选择。{ / p>

<强> Here is an example

<强> HTML

#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;
}

<强> CSS：

{{1}}

Answer 3

您的第一个选择器正在寻找的内容是<{1}} 内部图像。图像不能包含子元素。

如果元素是图片的 sibling ，您可能需要尝试#otherelement或img:hover~#otherelement。

Answer 4

是的，试试：

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

或

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

Answer 5

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

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

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

5 个答案:

相邻的同胞组合子

一般兄弟组合器