Question 36719 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Problem with add class on hover with equal data-id – Jquery

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?

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search