文章/答案/技术大牛

发布

社区首页 >问答首页 >悬停element1 + element2时悬停element1

问悬停element1 + element2时悬停element1
EN

Stack Overflow用户

提问于 2013-11-24 00:23:42

回答 2查看 76关注 0票数 0

我的代码看起来像：

<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/上查看问题(通过将光标移动到四个图像中的一个)。

html

css

wordpress

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-11-24 00:29:07

您可以这样使用邻接同胞选择器：

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

在行动中看到它：http://jsfiddle.net/RL43N/

不幸的是，纯CSS不可能允许用户悬停在.price上突出显示h3。您需要一些JavaScript才能做到这一点。

票数 1

Stack Overflow用户

发布于 2013-11-24 00:27:50

我建议，用你贴出的密码：

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

简单演示。

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

参考文献：

)组合器。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20169639

复制

相似问题

问悬停element1 + element2时悬停element1
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停element1 + element2时悬停element1EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停element1 + element2时悬停element1
EN