悬停相应图片时应用悬停文字设计

Question

所以我将鼠标悬停在产品上时对产品的文本使用设计http://www.screencast.com/t/X04O6Vn1

.prodThumb .title > span:hover {
    color: #CA681D !important;
    text-decoration: underline !important;
}

现在，我希望当用户转到与此产品名称对应的图像时，也应用此设置http://www.screencast.com/t/6qouh6CkO

但我不确定我是否可以仅用 CSS 代码来解决这个问题。我还没有找到任何可以工作的选择器

我的想法是找到选择器，然后输入以下代码

selector:hover {
    color: #CA681D !important;
    text-decoration: underline !important;
}

我正在处理这个网址 https://www.tresor-ethnique.com/collections/africain

有什么想法会有所帮助吗？非常感谢:)

Answer 1

你可以试试这个：

.imgWrap:hover ~ .title > span:first-child {
    color: #CA681D !important;
    text-decoration: underline !important;
}

"~"是一般的同级组合器：https://www.w3.org/TR/css3-selectors/#general-sibling-combinators