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

除非可以在与strong相同的选择器中指定h3:hover元素，否则不能在CSS3中执行此操作（此时此情况仅适用于strong元素为兄弟），但是否则你不能使用纯CSS做“不相交”的效果，你必须使用脚本。这是一个简单的例子（一次不使用jQuery）。我没有测试过 - 它可能有效，但可能没有。玩得开心！

document.querySelectorAll(".tratoresList h3")forEach( function(el1) {
    el1.addEventListener("mouseover", function() {

        document.querySelectorAll(".tratoresList strong").forEach( function(el2) { 
            el2.classList.toggleClass("hoverEffect");
        } );
    });
} );

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我希望它可以帮助你......

Answer 3

当您将鼠标悬停在h3上时，如果要更改强标记（h3内）的文字样式。

.tratoresList h3:hover strong{
    color: green;
}}

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

3 个答案: