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

Question

考虑这个 JSFiddle

当我在 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;
}

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>

JS

$(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');
    });

});

Answer 1

悬停前单元格上没有宽度

在这里工作 JSFiddle:http://jsfiddle.net/F2smc/5/

div.demo div {
    display:table-cell;
    text-align:center;
    width: 33%;   // <<< Added this
}

基本上其他 2 个单元格的宽度为零，所以第二行折叠成中间非常窄的东西，所以看起来它只在选项 2 下。

更好的例子:http://jsfiddle.net/F2smc/29/

您可以获得相同的效果，无需指定确切的百分比宽度，只需为跨度添加此 CSS(这样它们就不会在其父 div 内折叠):

div.demo span
{
    width:100%;
}

如果您在 div 上放置独特的颜色，那么发生的事情就会变得非常明显。 div 上的 100% 并不意味着 div 会像在表格中那样使用它。基本上任何将宽度应用于下划线 div/spans 的更改都将起作用。建议您在 F12 Debug模式下使用 Chrome 来查看此类工作，因为它清楚地显示原始元素均为 0 宽度。

附言。使用仅在不同情况下变化的 ID 确实是个坏主意

单独说明:

当 JQuery 中每个不同的 id 做大致相同的事情时，您通常不会硬连接事件。如果您将您的 ID 更改为真正独一无二的(不只是大小写)，您可以执行以下操作:

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

它获取当前悬停项目的 ID，附加一些独特的内容，然后通过 ID 更新匹配的项目。

工作演示:http://jsfiddle.net/F2smc/30/

这应该会在保留原始结构的同时进行清理。