How do I change one element's color on the hover of another?

Question

I'm trying to change an element's color on my web page when I hover over a different element that is sitting right next to it. I have tried using the child/sibling selectors "+/~", but to no avail. I'm using alot of Bootstrap 4 syntax in my code, and the <i> is an icon from FontAwesome. I'm just trying to change the color of <i> when I hover over the "Support Us" text. Any help would be greatly appreciated!

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>

score 2 · Accepted Answer · answered Sep 07 '19 at 20:42

You can only access elements at the same level or nested in the current element through CSS.

Instead .hoverText1 we need to put "hover" pseudo-class to element .text-light

Result

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

score 0 · Answer 2 · answered Sep 07 '19 at 20:44

You can group both of them in a single parent div( with say class container) in this way

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

score 0 · Answer 3 · answered Sep 07 '19 at 21:05

You could add IDs to the 'Support Us' h1 and icon, then grab and manipulate with javascript. Bootstrap has a lot of integrated styling that can throw you off, so this would give you the option to create a mock hover that is less susceptible to some of the integrated features.

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

How do I change one element's color on the hover of another?

3 Answers3