1

Есть такой код: https://jsfiddle.net/y7cj5tmr/

<style>

.outer {
  padding:20px;
  height:100px;
  background-color: green;
  display: inline-block;
}

.inner {
  height:100%;
  background-color: red;
}

</style>

...

<div class="outer">
    <div class="inner">
        Содержимое 1
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 2
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 3
    </div>
</div>
...

Нужно чтобы при наведении мыши на один из трех блоков, менялись CSS свойства входящих в этот блок div'ов.

Например при наведении мыши на средний блок, у внешнего и внутреннего div'а менялись цвета background'ов.

Подскажите, как это сделать на css и javascript не меняя html код (без jQuery).

Спасибо!

1 ответ 1

3

Используйте псевдокласс :hover

.outer {
  padding:20px;
  height:100px;
  background-color: green;
  display: inline-block;
}

.inner {
  height:100%;
  background-color: red;
}

.outer:hover .inner {
  background-color: yellow;
}
.outer:hover {
  background-color: blue;
}
<div class="outer">
    <div class="inner">
        Содержимое 1
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 2
    </div>
</div>

<div class="outer">
    <div class="inner">
        Содержимое 3
    </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.