html - 将鼠标悬停在将在另一个元素中生效的元素上

Question

我有以下代码:

.tratoresList h3{
    font-family: "opensans-light-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
    text-align: center;
}
.tratoresList strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
}
.tratoresList strong, .tratoresList h3:hover{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

这是 HTML，有人能告诉我哪里错了吗？

<ul class="margin-top-50 tratoresList">
<li>
    <img src="./imagens/trator1.png" />
        <h3>linha <strong>4000</strong></h3>

    <div class="tratoresListArrow"></div>
</li>   

当我在 h3 中悬停时，他也必须在 strong 中悬停，反之亦然。

我做错了什么？

Answer 1

.tratoresList h3{
    font-family: "opensans-light-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
    text-align: center;
}
.tratoresList strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #000;
    width: 210px;
}
.tratoresList h3:hover, .tratoresList h3:hover ~ strong{
    font-family: "opensans-extrabold-webfont";
    font-size: 17px;
    color: #a80000;
    width: 210px;
}

<div class="tratoresList">
  <h3>CSS - HOVER AN ELEMENT THAT WILL TAKE EFFECT IN ANOTHER</h3>
  <strong>I THINK ITS POSSIBLE NOW !</strong>
</div>

希望对你有帮助....