Question

我在Stack Overflow上了解到，我可以将鼠标悬停在第一个元素上并为第二个元素设置动画，只要第二个元素位于HTML5中的第一个元素后面。

所以我有一个例子：

div.oblacek-hold:hover img.oblacek {
    -webkit-filter: blur(0px) opacity(100%);
    -o-filter: blur(0px) opacity(100%);
    -ms-filter: blur(0px) opacity(100%);
    filter: blur(0px) opacity(100%);
}

此处img.oblacek位于div.oblacek-hold元素内，当鼠标悬停在div.oblacek-hold上时，img.oblacek会生成动画。这很棒！但如果我悬停img.oblacek，img.oblacek也会动画，这就是我不想要的。

有没有办法用CSS解决这个问题？

Answer 1

请使用!important中的img.oblacek默认值。

像这样的东西

.oblacek:hover {
    -webkit-filter: blur(0px) opacity(100%) !important;
    -o-filter: blur(0px) opacity(100%) !important;
    -ms-filter: blur(0px) opacity(100%) !important;
    filter: blur(0px) opacity(100%) !important;
}

在此检查样本小提琴https://jsfiddle.net/nikhilvkd/h9vjezvp/1/

Answer 2

只需将另一个:hover添加到img.oblacek，并使用!important覆盖不需要的属性，例如

img.oblacek:hover {
    filter: blur(0px) opacity(100%) !important;
}

jsfiddle example

悬停在一个元素上可以激活另一个元素

2 个答案: