悬停在html中的文本上不会更改css中的图像

Posted 2023-05-08

【中文标题】悬停在html中的文本上不会更改css中的图像

【英文标题】：hovering on text in html not changing image in css

【发布时间】：2020-09-22 02:40:29

【问题描述】：

当用户点击不同的文本时，我正在尝试更改图像，我的代码如下：

$("#zubi a").hover(function() 
  $("#pic").removeClass().addClass($(this).attr('rel'));
);

#pic.p1 
  content: url("https://picsum.photos/id/236/200/300");


#pic.p2 
  content: url("https://picsum.photos/id/237/200/300");


#pic.p3 
  content: url("https://picsum.photos/id/238/200/300");


#pic.p4 
  content: url("https://picsum.photos/id/239/200/300");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zubi" class="row">
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a class="dropdown-item" href="category.html">MEN'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p1" class="dropdown-item" href="category.html">WOMEN'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p2" class="dropdown-item" href="category.html">KID'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p3" class="dropdown-item" href="category.html">JEWELLERY</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p4" class="dropdown-item" href="category.html">OTHER</a></div>
  <div class="col-md-0 col-lg-2"><img id="pic" style="margin-left:37%;height:90px;" class="mw-100 mh-100" src="https://picsum.photos/id/235/200/300"  /></div>
</div>

将鼠标悬停在文本上时，图像不会改变。谁能告诉我这里出了什么问题，提前谢谢

【问题讨论】：

1.没有 jQuery，2 个相同的图像 - 我在您的代码中添加了 jQuery，但它仍然是相同的图像

@mplungjan 第一张图不一样，剩下的我只是举个例子

当我将图像更改为 5 个不同的图像并添加 jQuery 时，您的代码似乎可以工作

@mplungjan 我无法将 jquery 添加到我的网站，这使我的整个网站错位，你能告诉我一个解决方案

投票结束是因为 不可重现或由错字引起 虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。

【参考方案1】：

在 jQuery 中没有任何东西可以“错位”网站，除非有不活动的 jQuery 代码突然被激活或旧的 jQuery 已被弃用并且与新的 jQuery 库一起工作不佳。

如果您的模板已经有 jQuery，那么只要您使用不同的图像，代码就应该可以工作。

也许你需要的只是包装

$(function() 
  $("#zubi a").hover(function() 
    $("#pic").removeClass().addClass($(this).attr('rel'));
  );
);

如果不是，那么这里是您在 vanilla JS 中发布的代码。注意我把 rel 改成了 data-rel

document.getElementById("zubi").addEventListener("mouseover", function(e) 
  const tgt = e.target;
  if (tgt.tagName.toUpperCase() === "A") 
    const pic = document.getElementById("pic")
    pic.className="";
    pic.classList.add(tgt.dataset.rel);
  
);

#pic.p1 
  content: url("https://picsum.photos/id/236/200/300");


#pic.p2 
  content: url("https://picsum.photos/id/237/200/300");


#pic.p3 
  content: url("https://picsum.photos/id/238/200/300");


#pic.p4 
  content: url("https://picsum.photos/id/239/200/300");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zubi" class="row">
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a class="dropdown-item" href="category.html">MEN'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a data-rel="p1" class="dropdown-item" href="category.html">WOMEN'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a data-rel="p2" class="dropdown-item" href="category.html">KID'S WEAR</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a data-rel="p3" class="dropdown-item" href="category.html">JEWELLERY</a></div>
  <div class="col-md-4 col-lg-2 mt-3 pb-3"><a data-rel="p4" class="dropdown-item" href="category.html">OTHER</a></div>
  <div class="col-md-0 col-lg-2"><img id="pic" style="margin-left:37%;height:90px;" class="mw-100 mh-100" src="https://picsum.photos/id/235/200/300"  /></div>
</div>