在懸停時添加具有相同資料ID的類的問題-有解無憂

我需要在懸停 img 上更改具有相同資料 ID 的顏色標題

   <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>

在懸停時，a[data-id="2"]我需要div[data-id="2"]在 js 或 jquery 中更改 .left_box 的顏色。你能幫助我嗎？

uj5u.com熱心網友回復：

找到適合您的選擇器a-->a[data-id="2"]
懸停時使用jquery hover對其進行操作
找到您的選擇器div-->.left_box div[data-id="2"]
使用jquery CSS獲取其顏色
使用相同的方法更改鏈接的顏色。

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

uj5u.com熱心網友回復：

純Javascript解決方案：

用于querySelectorAll獲取所有.right_box > a[data-id]

然后從中獲取 ide.dataset.id并使用它來查找它的朋友

然后應用onmouseover并onmouseleave更改您想要的任何樣式

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>

uj5u.com熱心網友回復：

jQuery解決方案。在懸停回呼中，獲取被懸停的元素的 id

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

那么你的“標題”選擇器變成：

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

沒有變數，這將生成選擇器：.left_box > div[data-id='2']

更新片段：

$(".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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/505793.html

標籤：javascript php html jQuery css

上一篇：無法打開流：使用__DIR__時沒有這樣的檔案或目錄

下一篇：使用Sum特定值鍵合并陣列