Question

当我将鼠标悬停在旁边的其他元素上时，我试图更改网页上元素的颜色。我尝试使用子/兄弟选择器“ + /〜”，但无济于事。我在代码中使用了很多Bootstrap 4语法，而<i>是FontAwesome的图标。将鼠标悬停在“支持我们”文本上时，我只是想更改<i>的颜色。任何帮助将不胜感激！

HTML和CSS：

.Kicker {
    color: #05ce78;
}

i.Kicker:hover {
    color: black;
}

a {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
}

a.hoverText1:hover + .Kicker {
    color: black;
    text-decoration: inherit;
    transition: 0.1s;
}

<div class="row align-items-center mt-4 ml-0">

<h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com">Support Us:</a></h1>
                   
<i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x"></i>
                 
</div>

Answer 1

您只能通过CSS访问相同级别或嵌套在当前元素中的元素。

代替.hoverText1，我们需要将“悬停”伪类放入元素.text-light

结果

.Kicker {
    color: #05ce78;
}

i.Kicker:hover {
    color: black;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

.text-light:hover + .Kicker {
    color: black;
    text-decoration: inherit;
    transition: 0.1s;
}

<div class="row align-items-center mt-4 ml-0">

    <h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com">Support Us:</a></h1>

    <i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x">icon-placeholder</i>

</div>

Answer 2

您可以通过这种方式将它们都分组在单个父div（带有“说”类容器）中

<style>
    .Kicker{
    color: #05ce78;
    }

.container:hover .Kicker {
    color: black;
}
</style>
<div class="row align-items-center mt-4 ml-0 container">
<h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com">Support Us:</a></h1>              
<i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x"></i>
</div>

Answer 3

您可以将ID添加到“支持我们” h1和图标中，然后使用javascript进行抓取和操作。 Bootstrap具有许多可以使您失望的集成样式，因此，您可以选择创建不易受某些集成功能影响的模拟悬停。

        <div class="row align-items-center mt-4 ml-0">

                <h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com" id='support'>Support Us:</a></h1>

                <i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x" id='icon'></i>

        </div>

CSS

.Kicker {
    color: #05ce78;
}

i.Kicker:hover {
    color: black;
}

a {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
}

a.hoverText1:hover + .Kicker {
    color: black;
    text-decoration: inherit;
    transition: 0.1s;
}

.hovered{
    color: black;
    text-decoration: inherit;
    transition: 0.1s;
}

JavaScript

    <script>
      function hover() {
        document.getElementById("icon").classList.add("hovered");
      }

      function noHover() {
        document.getElementById("icon").classList.remove("hovered");
      }

      document.getElementById("support").addEventListener("mouseover", hover);
      document.getElementById("support").addEventListener("mouseout", noHover);
    </script>

如何在另一个元素的悬停时更改一个元素的颜色？

3 个答案: