Наведите указатель мыши на элемент, который вступит в силу в другом

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, и наоборот.

Что я сделал не так?

html css

0

Felipe Viero Goulart 11 Ноя 2014 в 08:23

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>

Надеюсь, это вам поможет ....

1

Thiyagesh 11 Ноя 2014 в 08:29

Answer 2

Вы не можете сделать это в CSS3, если только элемент strong не может быть указан в том же селекторе, что и h3:hover (сейчас это работает только тогда, когда элемент 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");
        } );
    });
} );

1

Dai 11 Ноя 2014 в 08:27

Answer 3

Если вы хотите изменить стиль текста в сильных тегах (внутри h3) при наведении курсора на h3 ..

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

0

Kalyan Chakravarthy S 11 Ноя 2014 в 10:56

Наведите указатель мыши на элемент, который вступит в силу в другом

3 ответа

Похожие вопросы

Новые вопросы

html