Advertisement

Change Color of Icon When Hovering Over Adjacent Text With jQuery

css dom html javascript jquery

HappyHands31

asked 27 Jan, 2021

I have seen this article but I want to change the color of the icon with JavaScript instead.

Trying to write a function that changes the color of the icon and the text when the icon or the text is hovered over.

I’m using the code provided in this answer to check to see if the element is hovered with jQuery:

function changeIconColor (hoverState) {
let contactText = document.getElementsByClassName('contact-text');
let contactIcon = document.getElementsByClassName('contact-icon');  
//if the text is hovered over, change the color of the icon to #e46e6e
if ($('#contact-text').is(":hover")) {
    contactIcon.css("color", "red");
};
if ($('#contact-icon').is(":hover")) {
    contactText.css("color", "red");
};
}

changeIconColor();

.outer-one {
  display: flex;
  flex-direction: row;
}

.outer-two {
  display: flex;
}

.phone-text, .contact-text {
  color: #213b56;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Raleway';
  margin-top: 4px;
}

.contact-text {
  margin-top: 7px;
}

.contact-text:hover {
  color: #e46e6e;
}

.user-icon, .contact-icon {
  padding: 7px;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

   <div class="outer-one">
   <div class="outer-two">
   <i class="far fa-user user-icon"></i>
   <span class="phone-text" style="font-family: Raleway, sans-serif; font-size: 
                                1.2rem;">(314) 567-7000  | </span>
   <i class="far fa-envelope contact-icon" id="contact-icon"></i>
   <a class="contact-text" href="http://cfk2021.flywheelsites.com/" id="contact-text">CONTACT</a>
   </div>
  </div>

As you can see, I’m loading jQuery in the <head> of the html, so I’m not sure why I’m getting a script error. Or check out this jSFiddle for reference.

Advertisement

Answer

function changeIconColor (hoverState) {
    let contactText = document.getElementsByClassName('contact-text')[0];
    let contactIcon = document.getElementsByClassName('contact-icon')[0];  
    //if the text is hovered over, change the color of the icon to #e46e6e
    if ($('#contactText').is(":hover")||$('#contactIcon').is(":hover")) {
      contactText.style.color = "red";
      contactIcon.style.color = "red";
    } else {
      contactText.style.color = "black";
      contactIcon.style.color = "black";
    }
}
document.getElementsByClassName('contact-text')[0].addEventListener("mouseenter", function(e) {
    changeIconColor();
});
document.getElementsByClassName('contact-text')[0].addEventListener("mouseleave", function(e) {
    changeIconColor();
});
document.getElementsByClassName('contact-icon')[0].addEventListener("mouseenter", function(e) {
    changeIconColor();
});
document.getElementsByClassName('contact-icon')[0].addEventListener("mouseleave", function(e) {
    changeIconColor();
});

.outer-one {
      display: flex;
      flex-direction: row;
    }

    .outer-two {
      display: flex;
    }

    .outer-three {
      display: flex;
    }

    .phone-text, .contact-text {
      color: #213b56;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Raleway';
      margin-top: 4px;
    }

    .contact-text {
      margin-top: 7px;
    }

    .contact-text:hover {
      color: #e46e6e;
    }

    .user-icon, .contact-icon {
      padding: 7px;
    }

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="outer-one">
  <div class="outer-two">
    <i class="far fa-user user-icon"></i>
    <span class="phone-text" style="font-family: Raleway, sans-serif; font-size: 
                                    1.2rem;">(314) 567-7000  | </span>
    <i class="far fa-envelope contact-icon" id = "contactIcon"></i>
    <a class="contact-text" id = "contactText" href="http://cfk2021.flywheelsites.com/">CONTACT</a>
  </div>
</div>

This should do the trick I just made the edits mentioned in the comments, then put changeIconColor into event handlers for the elements to update the colors every time the mouse entered or exited the element boundaries, I think this might be easier in CSS but I’m not big on CSS

Advertisement