Change Color of Icon When Hovering Over Adjacent Text With jQuery

Question

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.

Oh - thought since I created those variables within the function that would work - let me fix that. — HappyHands31, Jan 27 '21 at 18:25
I was curious if I could get a more descriptive error message so i plugged it in codepen and it doesn't register an error — Other Me, Jan 27 '21 at 18:32
I'm not getting the error at all anymore after adding ID's as @Rojo suggested. It's just that now, the function isn't doing anything. — HappyHands31, Jan 27 '21 at 18:33
You need to add `[0]` after `contactIcon` and `contactIcon` since `getElementsByClassName` returns a list — Rojo, Jan 27 '21 at 18:36
Your problem appears to be that your only calling your function on start-up, it needs to be called when the mouse moves over or away from the elements, you should use `"mouseenter"` and `"mouseleave"` events — Other Me, Jan 27 '21 at 18:43
since version of March 9, 2014 , the hover pseudo selector is not supported in jquery , you should use hover() function , see my answer below — Bourbia Brahim, Jan 27 '21 at 19:48

score 3 · Answer 1 · edited Mar 18 '21 at 14:01

You're using the wrong pseudo selector on jQuery, thus the error.

Use hover() instead to change color, knowing that it has two function as parameter, first for mouseenter and second for mouseleave.

See the below snippet :

1- hover apply on same text and icon ( shorter version ) :

$(function() {
  $('.contact-text, .contact-icon').hover(
    function() {
      $('.contact-text, .contact-icon').css("color", "#e46e6e");
    },
    function() {
      $('.contact-text, .contact-icon').css("color", "#213b56");
    }
  )
});

.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"></i>
    <a class="contact-text" href="http://cfk2021.flywheelsites.com/">CONTACT</a>
  </div>
</div>

2- hover applied separatly on text & icon :

//
let $contactText = $('.contact-text');
let $contactIcon = $('.contact-icon');

$contactText.hover(
  function() {
    $contactIcon.css("color", "#e46e6e");
  },
  function() {
    $contactIcon.css("color", "#213b56");
  }
)

$contactIcon.hover(
  function() {
    $contactText.css("color", "#e46e6e");;
  },
  function() {
    $contactText.css("color", "#213b56");
  }
)

.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"></i>
    <a class="contact-text" href="http://cfk2021.flywheelsites.com/">CONTACT</a>
  </div>
</div>

this is much simpler solution because of jQuery so it's probably better than mine — Other Me, Jan 27 '21 at 20:07

Other Me · Accepted Answer · 2021-01-27T20:04:49.607

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

This is very close but the idea is that both elements - the envelope and text - both need to become red when _either_ one is hovered over. Made some adjustments and now it works when the envelope is hovered over, but not the text: https://jsfiddle.net/nLg5y8o6/1/ — HappyHands31, Jan 27 '21 at 19:06
ok, @HappyHands31 by the way for the fix I just copied your little chunk for the if statements to save a little work, just thought I ought to credit you for that :) — Other Me, Jan 27 '21 at 19:33
It's still turning both elements red when you hover over the envelope, but only turning the text red when you hover over the text. It needs to turn both the text _and_ the envelope red when you hover over the text, if possible. — HappyHands31, Jan 27 '21 at 19:43

Change Color of Icon When Hovering Over Adjacent Text With jQuery

2 Answers2

1- hover apply on same text and icon ( shorter version ) :

2- hover applied separatly on text & icon :

Linked