主页 / 问题 / 1086590
Accepted
Black Fire
Asked:2020-02-24 06:55:15 +0000 UTC2020-02-24 06:55:15 +0000 UTC

更改悬停时相邻元素的样式

  • 772

将鼠标悬停在文本上时如何更改文本颜色并同时更改背景图像？例如，到这个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>

html

2 个回答

  1. Best Answer

    :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>

    • 3 

  2.     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>

    • 0

相关问题