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






   
   
   
   (314) 567-7000  | 
   
   CONTACT

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

user_11133909 · 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;
    }







  
    
    (314) 567-7000  | 
    
    CONTACT

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

user_2932476 · Answer

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


  





  
    
    (314) 567-7000  | 
    
    CONTACT

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


  





  
    
    (314) 567-7000  | 
    
    CONTACT

Change Color of Icon When Hovering Over Adjacent Text With jQuery

2 Answers

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

2- hover applied separatly on text & icon :