css - css在悬停时显示不同的div

Question

当悬停不同的 div 但由于某种原因显示错误的 div 时，我试图使 div 可见。您将在下面的链接中看到我的意思。我希望第二个心形图标显示在悬停的框上，而不是旁边的那个。

http://jsfiddle.net/aaB7t/

.box-product-item:hover + .box-product-item .compare {
    display:  inline-block;
}

我希望这是有道理的。

Answer 1

您需要将您的 css 规则更改为

.box-product-item:hover .compare {
    display:  inline-block;
}

摆脱兄弟选择器部分。正如您现在所拥有的那样，它是说.comparea 内部的 任何.box-product-item本身都紧跟在.box-product-item悬停的 a 之前，应该display: inline-block。