使用 jQuery 将鼠标悬停在相邻文本上时更改图标颜色
[英]Change Color of Icon When Hovering Over Adjacent Text With jQuery
问题描述
我看过这篇文章，但我想用 JavaScript 更改图标的颜色。
尝试编写一个 function 当图标或文本悬停时更改图标和文本的颜色。
我正在使用此答案中提供的代码来检查元素是否悬停在 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>
如您所见，我在 html 的<head>中加载html ，所以我不确定为什么会出现脚本错误。 或者查看这个jSFiddle以供参考。
2 个解决方案
解决方案1
2 已采纳 2021-01-27 18:52:04
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>
这应该可以解决我刚刚在评论中提到的编辑，然后将changeIconColor放入元素的事件处理程序中，以在每次鼠标进入或退出元素边界时更新 colors，我认为这在 CSS 中可能更容易，但我m 在 CSS 上不大
解决方案2
2 2021-01-27 19:45:14
您在 jQuery 上使用了错误的伪选择器，因此出现错误。
使用hover()来更改颜色，知道它有两个 function 作为参数，第一个用于mouseenter ，第二个用于mouseleave 。
请参阅以下代码段：
1- hover 适用于相同的文本和图标（较短的版本）：
$(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 分别应用于文本和图标：
// 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>
将鼠标悬停在图标上时如何对某些文本应用过渡效果？
[英]How to apply a transition effect to some text when hovering over an icon?
将鼠标悬停在文本上时使用JavaScript更改图像，并将鼠标悬停在图像上时更改文本
[英]Use JavaScript to change image when hovering over text, and change text when hovering over image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.