Problem with add class on hover with equal data-id

Website Developer 0
Viewed 42

I need to change color title with equal data-id on hover img

   <div class="left_box">
      <div data-id="1">
          title 1
       </div>
       <div data-id="2">
          title 2
       </div>
       <div data-id="3">
          title 3
       </div>
    </div>
    <div class="right_box">
        <a href="#" data-id="1">
           <img src="url_image">
        </a>
        <a href="#" data-id="3">
           <img src="url_image">
        </a>
        <a href="#" data-id="2">
           <img src="url_image">
        </a>
   </div>

On hover of a[data-id="2"] I need to change color of .left_box div[data-id="2"] in js or jquery. Can you help me?

jquery php javascript css html
3 Answers

  1. Find the right selector for you a --> a[data-id="2"]

  2. Use the jquery hover to act on it when hovered

  3. Find the selector for your div --> .left_box div[data-id="2"]

  4. Get its color by using jquery CSS

  5. Change the color of your link using the same method.

    $('a[data-id="2"]').hover(function(event) { $(event.target).css("color", $('.left_box div[data-id="2"]').css("color")); })

userGhX90

Pure Javascript solution:

Uses querySelectorAll to get all the .right_box > a[data-id]

Then get the id from e.dataset.id and use that to find it's friend

Then apply onmouseover and onmouseleave to change any styling you'd like

const ee = document.querySelectorAll('.right_box > a[data-id]')

for (let e of ee) {
  let friend = document.querySelector(`div[data-id="${e.dataset.id}"]`)
  e.onmouseover =  () => friend.style.color = 'red';
  e.onmouseleave = () => friend.style.color = 'unset';
}
<div class="left_box">
    <div data-id="1">
        title 1
     </div>
     <div data-id="2">
        title 2
     </div>
     <div data-id="3">
        title 3
     </div>
</div>
<div class="right_box">
    <a href="#" data-id="1">
       <img src="url_image">
    </a>
    <a href="#" data-id="3">
       <img src="url_image">
    </a>
    <a href="#" data-id="2">
       <img src="url_image">
    </a>
 </div>

Based on OP's comment; same idea using onmousedown and onmouseup

const ee = document.querySelectorAll('.right_box > a[data-id]')

for (let e of ee) {
  let friend = document.querySelector(`div[data-id="${e.dataset.id}"]`)
  e.onmousedown =  () => friend.style.color = 'red';
  e.onmouseup = () => friend.style.color = 'unset';
}
<div class="left_box">
    <div data-id="1">
        title 1
     </div>
     <div data-id="2">
        title 2
     </div>
     <div data-id="3">
        title 3
     </div>
</div>
<div class="right_box">
    <a href="#" data-id="1">
       <img src="url_image">
    </a>
    <a href="#" data-id="3">
       <img src="url_image">
    </a>
    <a href="#" data-id="2">
       <img src="url_image">
    </a>
 </div>

0stone00

jquery solution. Within the hover callback, get the id of the element being hovered with

var id = $(this).data("id");

then your "title" selector becomes:

$(`.left_box > div[data-id='${id}']`)

without the variable, this would generate the selector: .left_box > div[data-id='2']

Updated snippet:

$(".right_box a").hover(function() {
    var id = $(this).data("id");
    $(`.left_box > div[data-id='${id}']`).addClass("hover");
  },
  function() {
    var id = $(this).data("id");
    $(`.left_box > div[data-id='${id}']`).removeClass("hover");
  })
.hover { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_box">
  <div data-id="1">
    title 1
  </div>
  <div data-id="2">
    title 2
  </div>
  <div data-id="3">
    title 3
  </div>
</div>
<div class="right_box">
  <a href="#" data-id="1">
    <img src="url_image">
  </a>
  <a href="#" data-id="3">
    <img src="url_image">
  </a>
  <a href="#" data-id="2">
    <img src="url_image">
  </a>
</div>

freedomn-m0
Related