如何解决在悬停时,突出显示 div 和所有其他具有相同文本的 div
我无法理解这个!请帮忙!
我想要做的是,当我将鼠标悬停在 div 类上时,我希望该 div 的背景发生变化,但我也希望该类的所有其他 div 更改背景颜色,如果它们具有相同的文本值。
例如:
约翰被提及 3 次,刘易斯被提及两次。所有其他人只在那里一次。将鼠标悬停在 John 上将突出显示悬停的 div 以及具有相同文本的所有其他 div。然后,当不再悬停时,应删除突出显示。
任何帮助将不胜感激。谢谢。
$(document).ready(function() {
$('.users > .user').hover(function() {
var current = $(this);
$('.users > .user').each(function() {
if (!$(this).is(":contains('" + current.text() + "')")) {
$(this).closest('.users > .user').addClass('bg2');
}
});
});
});
* {padding:0;margin:0;Box-sizing:border-Box;}
ul {
list-style-type:none;
width:150px;
}
li {
height:40px;
background-color:#FFF5D7;
margin-bottom:10px;
line-height:38px;
text-align:center;
font-family:arial;
font-weight:bold;
border:2px solid #999;
}
.bg2 {background-color:#4DA6FF;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="users">
<li class="user">John</li>
<li class="user">Peter</li>
<li class="user">John</li>
<li class="user">Lewis</li>
<li class="user">Graham</li>
<li class="user">Shaun</li>
<li class="user">John</li>
<li class="user">Lewis</li>
</ul>
解决方法
你可以试试这样的。
$(document).ready(function () {
$('.users > .user').mouseenter(function () {
var current = $(this);
$('.users > .user').each(function () {
// Contains Matches For Text Everywhere In Word
// if ($(this).is(":contains('" + current.text() + "')")) {
// This way you match full text
// Using Trim To Also Make Sure You Have No Empty Spaces
if ($(this).text().trim() === current.text().trim()) {
$(this).closest('.users > .user').addClass('bg2');
}
});
});
$('.users > .user').mouseleave(function () {
$('.users > .user').removeClass("bg2");
});
});
但正如其他人所说,您可能需要先做一些研究,然后再提出之前可能已经回答过的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。