Js on mousehover - find matching text from two divs

Question

I have a code that shows a couple of user names in two different divs. The idea is for the user to find matching names or no matching names.

My idea is to make a function which acts like the browsers F3 button, but find matches on mousehover

Ex:

            <div id="fccStatus" class="col-md-6">
                <h2 style="text-align: center;color:white;">
                    Users you follow :
                </h2>
                <p id="a">a</p>
                <p id="b">b</p>
                <br>
            </div>
            <div id="links" class="col-md-6">
                <h2 style="text-align: center;color:white;">
                    Users who followed back :                    
                </h2>
                 <p id="a">a</p>
                <p id="b">b</p>
                <br>
            </div> 

    $( "#body" ).mouseover(function() {
       // find matching ids || text || classes .. e.t.c.
       });

Any ideas are much appreciated !

Answer 1

You can use the selector of jquery to find all the related elements, in this case we are matching all who has the same class that is on the current mouseover.

When it leaves it just change to the initial color.

You can use this same idea for match the text, classes etc.

I wouldn't recommend you to match same id's due to ids must be unique.

$("p").mouseover(function() {
       // find matching ids || text || classes .. e.t.c.
       $("p."+$(this).attr("class")).css("color","red");
});
$("p").mouseleave(function() {
       // find matching ids || text || classes .. e.t.c.
       $("p."+$(this).attr("class")).css("color","black");
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fccStatus" class="col-md-6">
                <h2 style="text-align: center;color:white;">
                    Users you follow :
                </h2>
                <p class="a">a</p>
                <p class="b">b</p>
                <br>
            </div>
            <div id="links" class="col-md-6">
                <h2 style="text-align: center;color:white;">
                    Users who followed back :                    
                </h2>
                 <p class="a">a</p>
                <p class="b">b</p>
                <br>
            </div>