在css中悬停不同的div

Posted 2023-05-08

【中文标题】在css中悬停不同的div

【英文标题】：Hovering different divs in css

【发布时间】：2016-01-05 08:37:44

【问题描述】：

我正在尝试对 div 内的图像应用一些悬停效果。 html中的类似内容

<div class="hey">
 <img src="./img/pic.png">
</div>

在 css 我尝试了类似的东西

.img:hover  some css code goes here

这很好用。但是，如果我不想将这些更改应用于整个 img 标签而仅应用于“嘿”类，该怎么办？这样做可以吗？

.hey[img:hover] 一些css代码...我认为这不起作用

【问题讨论】：

如果图像是 .hey div 的子级，请使用：.hey > img:hover ...

【参考方案1】：

我会在 div 上使用鼠标悬停。

.hey:hover

.hey:hover img

【讨论】：

你说得对，对不起，我以前做过，只是找不到我在哪个项目上做过。我会继续寻找。

看看 Shawns 的回答：***.com/questions/676324/… 根据您的需要，它可以工作。他建议用您悬停的元素填充 div。但如果图像没有填充您的 div，那么它对您没有帮助。

谢谢伙计！我也做过，但我不记得我是怎么做到的。我认为这很容易解决！

是的，我记得很简单。

您是否能够确定为什么它不能更早地工作？

【参考方案2】：

你试过了吗？

.hey .img:hover
  some css code

【参考方案3】：

我会试试.hey:hover css code

【参考方案4】：

我试过了

.hey:hover img some css code  

它对我有用:)

【参考方案5】：

找到一个示例链接

<div class="hey">
 <img class='img' src="./img/pic.png">
</div>

.img ~ .hey

取自这里： http://jsfiddle.net/ThinkingStiff/a3y52/

【讨论】：

~ 是sibling selector。目前，there is no parent selector。基于answer the OP posted，我认为您删除的答案更有帮助。

这个答案使用了兄弟选择器，但没有兄弟姐妹，所以我不明白它怎么可能是正确的。 jsFiddle 展示了一些不同的东西。

我看到他通过我删除的答案找到了成功。我很想知道为什么它不起作用。