将鼠标悬停在相应的 li 上时，JQuery 更改跨度的类答案

【问题标题】：JQuery Change class of a span on hover over respective li将鼠标悬停在相应的 li 上时，JQuery 更改跨度的类
【发布时间】：2023-03-28 14:20:01
【问题描述】：

我是 Jquery 的新手，下面的功能不起作用，我想做的类似于悬停图像缩略图以显示预览。

我有一组 li 的类，如“onelink”和一组跨度“one”等。在各自的 li 悬停时想要切换具有相同名称的跨度类

function displaydesc(id) {
  id = id.replace('link', '');
  $("#" + id).toggleClass("vis");
}

$(".list>ul>li").hover(
  function() {
    displaydesc($(this).attr("id"));
  });

.description span {
  position: absolute;
  display: none;
}
.vis {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list">
  <ul>
    <li id="onelink">one</li>
    <li id="twolink">two</li>
    <li id="threelink">three</li>
    <li id="fourlink">four</li>
  </ul>
</div>
<div class="description">
  <span id="one">Lorem ipsum dolor.</span>
  <span id="two">Tempore tenetur, doloribus.</span>
  <span id="three">Culpa, fuga adipisci.</span>
  <span id="four">Commodi, quisquam, quaerat!</span>
</div>

【问题讨论】：

“下面的功能不起作用”，什么不起作用？你得到什么错误？它在什么时候失败了？
@atmd，我没有收到任何错误，我注意到他没有链接到正确的类
它没有显示任何控制台日志或悬停时的任何错误。
已将问题改回班级列表，但仍然没有反应
OP 它适用于 sn-p 必须是您代码中的另一件事

标签： jquery css class hover

【解决方案1】：

在您的 jQuery 中，不要使用 .heading，而是使用 .list，因为它链接到其他东西。

应该是这样的：

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

这里是jsFiddle

【讨论】：

如果要显示/隐藏而不是 toggleClass 也可以添加 toggle() 元素本身
@DanielPinzon 好点，没意识到，只是看到类不正确
是的，ul 上方的 div 是 .list，而不是 .heading
@SACHINHD 很高兴我能帮上忙 :)

【解决方案2】：

使用 .list 而不是 .Heading

 function displaydesc(id){
    id=id.replace('link','');
    $("#"+id).toggleClass("vis");
}

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

.description span{
position: absolute;
display: none;
}

.vis{
display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="list">
<ul>

                        <li id="onelink">one</li>
                        <li id="twolink">two</li>
                        <li id="threelink">three</li>
                        <li id="fourlink">four</li>
</ul>
</div>

<div class="description">
    <span id="one">Lorem ipsum dolor.</span>
    <span id="two">Tempore tenetur, doloribus.</span>
    <span id="three">Culpa, fuga adipisci.</span>
    <span id="four">Commodi, quisquam, quaerat!</span>
</div>

【讨论】：