悬停时，突出显示 div 和所有其他具有相同文本的 div

Question

我无法理解这个！请帮忙！

我想要做的是，当我将鼠标悬停在一个 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>

Answer 1

你可以试试这样的。

   $(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");
    });
  });

但正如其他人所说，您可能想先做一些研究，然后再提出以前可能已经回答过的问题。