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

摆脱兄弟选择器部分。正如您现在所说的那样，它表示.compare内的任何.box-product-item本身前面都有一个.box-product-item正在悬停，应display: inline-block。