Javascript 鼠标输入和鼠标效果无法正常工作

想想这个

当我在Span1上输入鼠标时，Span1下方应显示一个蓝色条（与Span2和Span3相同）

但即使我在Span1、Span2或Span3上移动鼠标，蓝色条也只出现在Span2下

CSS

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
}
.under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto;
    display:block;
}

$(document).ready(function(){
    $('#span1').mouseenter(function(){
        $('#Span1').addClass('under');
    });
    $('#span2').mouseenter(function(){
        $('#Span2').addClass('under');
    });
    $('#span3').mouseenter(function(){
        $('#Span3').addClass('under');
    });
    $('#span1').mouseleave(function(){
        $('#Span1').removeClass('under');
    });
    $('#span2').mouseleave(function(){
        $('#Span2').removeClass('under');
    });
    $('#span3').mouseleave(function(){
        $('#Span3').removeClass('under');
    });

});

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
}
.under {
    width:auto;
    height:1px;
    text-decoration:underline;
    margin:0px auto;
    display:block;
}

HTML

<div class="demo">
    <div id='span1'>Span 1</div>
    <div id='span2'>Span 2</div>
    <div id='span3'>Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1'></span></div>
    <div><span id='Span2'></span></div>
    <div><span id='Span3'></span></div>
</div>

<div class="demo">
    <div id='one' class="hover">Span 1</div>
    <div id='two' class="hover">Span 2</div>
    <div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1'></span></div>
    <div><span id='Span2'></span></div>
    <div><span id='Span3'></span></div>
</div>

---

悬停前单元格上没有宽度

在这里工作： 如果你在div上涂上独特的颜色，事情就会变得非常明显。100%在div上并不意味着div会像在表中一样使用它。基本上，任何将宽度应用于下划线div/span的更改都会起作用。建议您在F12调试模式下使用Chrome查看这类工作，因为它清楚地显示原始元素的宽度均为0

另外，使用仅在情况下变化的ID确实是个坏主意

另请注意： 当JQuery中的每个不同id都执行大致相同的操作时，通常不会硬连线事件。如果您将您的ID更改为真正唯一的（不仅仅是根据具体情况），您可以执行以下操作：

$(document).ready(function () {
    $('.menu').hover(function () {
        $('#' + this.id + '-l').addClass('under');
    }, function () {
        $('span').removeClass('under');
    });
});

它获取当前悬停项的id，附加一些唯一的内容，然后按id更新匹配项

工作演示：

---

这应该会在保留原始结构的同时将其清理干净。

对于测试，我提供了文本装饰，您可以用背景色替换它

HTML

<div class="demo">
    <div id='span1'>Span 1</div>
    <div id='span2'>Span 2</div>
    <div id='span3'>Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1'></span></div>
    <div><span id='Span2'></span></div>
    <div><span id='Span3'></span></div>
</div>

<div class="demo">
    <div id='one' class="hover">Span 1</div>
    <div id='two' class="hover">Span 2</div>
    <div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1'></span></div>
    <div><span id='Span2'></span></div>
    <div><span id='Span3'></span></div>
</div>

JQuery

$(document).ready(function(){
    $('.hover').hover(function(){
     var id=$(this).attr("id");
        $('#'+id).addClass('under');
    },function(){
$('.hover').removeClass('under');
});

});

工作 试试这个

我已经编辑了你的html和css

<div class="demo">
    <div id='span1'>Span 1</div>
    <div id='span2'>Span 2</div>
    <div id='span3'>Span 3</div>
</div>
<div class="demo">
    <span id='Span1'></span>
    <span id='Span2'></span>
   <span id='Span3'></span>
</div>

或 试试这个

工作 无需更改任何html和css

只需添加

宽度：100px到

div.demo div {
    display:table-cell;
    text-align:center;
    width:100px;    
}

希望这有帮助，谢谢你
奇怪根据firebug的说法，这3个人中没有一个能在

下获得

，我认为在我的联盟中是不行的。mouseenter和mouseleave在很多浏览器上都不起作用。我会更改ID，如果有更多的跨距（如span4、Span5等），我必须改变宽度：33%到底是什么？只要他们有一个宽度，像上面的一行，它将工作。。。我知道这会受到批评，但是，考虑到您正在尝试的布局，您可能希望使用真实的表，以便列自动调整到数据行的大小。@Lonely:我已使用更干净的版本更新了答案，因此您不需要为不同数量的元素指定百分比。将100%的大小应用于跨距以避免崩溃。您的示例是执行
$（'#'+this.id.）.addClass（'under'）
，这是一种冗长的方法，与
$（this.addClass（'under'）
相同。。。为什么让事情变得更难？询问者使用第二行显示栏，而不是实际项目。很好（如果有点乐观的话）顺便说一下用户名：）
div.demo div {
    display:table-cell;
    text-align:center;
    width:100px;    
}