Question

我的代码如下：

<html>
<h3>product4</h3>
<span class="price"><del></del> <ins><span class="amount">£100</span></ins></span>
</html>

Css看起来像：

ul.products li.product h3 {
text-decoration:none;
color:transparent;
}

ul.products li.product a:hover h3 {
color:#ffffff;
}

.price ins {
text-decoration:none;
color:transparent;
}

.price ins :hover{
text-decoration:none;
color:#ffffff;
}

我想知道如何制作代码，所以当我将鼠标悬停在h3上时，h3和价格都将是#fffff。然后当我悬停价格时，价格和h3都将是#fffff

我知道我可以将两者都放在一个父母身上，但这是不可能的，因为我使用的是WooCommerce，这太先进了。

您可以直观地观看问题：http://oliver.kaspertoxvig.dk/（将光标移动到四个图像中的一个）

Answer 1

你可以这样使用adjacent sibling selector：

h3:hover, h3:hover + .price{color:#FFF;}

查看实际操作：http://jsfiddle.net/RL43N/

遗憾的是，使用纯CSS无法让用户将鼠标悬停在.price上以突出显示h3。你需要一些JavaScript才能做到这一点。

Answer 2

我建议您使用发布的代码：

h3:hover,
h3:hover + span.price {
    color: #fff;
}

Simple demo

这使用相邻兄弟（+）组合子来选择与span.price选择器匹配的元素的下一个兄弟（如果它匹配h3:hover选择器）。

参考文献：

Adjacent-sibling (+) combinator。

当hoving element1时悬停element1 + element2

2 个答案: