Изменить стили рядом расположенных элементов при наведении

Question

Как сделать, чтобы при наведении на текст, он менял цвет и одновременно менялась фоновая картинка? Например, на эту https://www.vulcaninc.com/hsdh/img/facebook.png

И в тоже время если навести на первую фоновую картинку, то она поменялась и одновременно с ней поменялся цвет текста.

То есть, чтобы при наведении будь-то на текст, будь-то на картинку, неважно, что первое, нужно, чтобы стили менялись у обоих элементов.

.logo-float {
    float: left;
}

.logo-float::after {
    content: "";
    display: block;
    clear: both;
}

.logo {
    float: left;
    width: 46px;
    height: 44px;
    background: url("https://static.wixstatic.com/media/1d08c9_6a0b824050d94131a320c701e55ab49d~mv2.png_srz_46_44_85_22_0.50_1.20_0.00_png_srz");
    margin-right: 15px;
}

.logo-text {
    height: 44px;
    float: right;
    text-transform: uppercase;
    font-weight: 700;
    line-height: .95;
}

.logo-text span:first-child {
    font-size: 29px;
}

.logo-text span:last-child {
    font-size: 18px;
}

 <div class="logo-float">
                    <div class="logo"></div>
                    <div class="logo-text"><span>Lorem</span><br><span>ipsum</span></div>
                </div>

Answer 1

    var ddd = document.getElementsByClassName('logo-float');

    ddd[0].onmouseover = function () {
        var logo = document.getElementsByClassName('logo');
        var text = document.getElementsByClassName('logo-text');
        logo[0].className = "new";
        text[0].className = "new1";
    };
    ddd[0].onmouseout = function () {
        var logo = document.getElementsByClassName('new');
        var text = document.getElementsByClassName('new1');
        logo[0].className = "logo";
        text[0].className = "logo-text";
    }

    .logo-float {
        float: left;
    }

    .logo-float::after {
        content: "";
        display: block;
        clear: both;
    }

    .logo {
        float: left;
        width: 46px;
        height: 44px;
        background: url("https://static.wixstatic.com/media/1d08c9_6a0b824050d94131a320c701e55ab49d~mv2.png_srz_46_44_85_22_0.50_1.20_0.00_png_srz");
        margin-right: 15px;
    }

    .logo-text {
        height: 44px;
        float: right;
        text-transform: uppercase;
        font-weight: 700;
        line-height: .95;
    }

    .logo-text span:first-child {
        font-size: 29px;
    }

    .logo-text span:last-child {
        font-size: 18px;
    }
    .new{
        float: left;
        width: 46px;
        height: 44px;
        background: url("https://www.vulcaninc.com/hsdh/img/facebook.png");
        margin-right: 15px;
    }
    .new1 {
        height: 44px;
        float: right;
        text-transform: uppercase;
        font-weight: 700;
        line-height: .95;
        color: #b61924;
    }

<div class="logo-float">
    <div class="logo"></div>
    <div class="logo-text"><span>Lorem</span><br><span>ipsum</span></div>
</div>

Answer 2

Добавляем псевдокласс :hover на родительский элемент. Примерно, так:

.logo-float {
  float: left;
  transition: .4s ease;
}

/* Смена стилей при наведении */
.logo-float:hover div.logo {
  background: url("https://www.vulcaninc.com/hsdh/img/facebook.png");
}
.logo-float:hover div.logo-text {
  color: blue;
}

.logo-float::after {
  content: "";
  display: block;
  clear: both;
}

.logo {
  float: left;
  width: 46px;
  height: 44px;
  background: url("https://static.wixstatic.com/media/1d08c9_6a0b824050d94131a320c701e55ab49d~mv2.png_srz_46_44_85_22_0.50_1.20_0.00_png_srz");
  margin-right: 15px;
}

.logo-text {
  height: 44px;
  float: right;
  text-transform: uppercase;
  font-weight: 700;
  line-height: .95;
}

.logo-text span:first-child {
  font-size: 29px;
}

.logo-text span:last-child {
  font-size: 18px;
}

<div class="logo-float">
  <div class="logo"></div>
  <div class="logo-text"><span>Lorem</span><br><span>ipsum</span></div>
</div>

БЛОГ НА HUSL

Изменить стили рядом расположенных элементов при наведении

Ответы (2 шт):