Question

I’m trying to make a div visible when a different div is hovered but for some reason the wrong div is displaying instead. You will see what I mean on the link below. I want the second heart icon to display on the box that is being hovered instead of the one next to it.

http://jsfiddle.net/aaB7t/

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

I hope that makes sense.

Answer 1

You need to change your css rule to

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

getting rid of the sibling selector portion. As you have it now, it’s saying that any .compare inside a .box-product-item which is itself immediately preceded by a .box-product-item which is being hovered, should display: inline-block.