Problem with add class on hover with equal data-id-CodePudding

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

   <div >
      <div data-id="1">
          title 1
       </div>
       <div data-id="2">
          title 2
       </div>
       <div data-id="3">
          title 3
       </div>
    </div>
    <div >
        <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?

CodePudding user response：

Find the right selector for you a --> a[data-id="2"]
Use the jquery hover to act on it when hovered
Find the selector for your div --> .left_box div[data-id="2"]
Get its color by using jquery CSS
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")); })

CodePudding user response：

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 >
    <div data-id="1">
        title 1
     </div>
     <div data-id="2">
        title 2
     </div>
     <div data-id="3">
        title 3
     </div>
</div>
<div >
    <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>

CodePudding user response：

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 >
  <div data-id="1">
    title 1
  </div>
  <div data-id="2">
    title 2
  </div>
  <div data-id="3">
    title 3
  </div>
</div>
<div >
  <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>