鼠标悬停和鼠标效果不正常

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 / span的更改都可以。建议您在F12调试模式下使用Chrome来查看此类工作，因为它清楚地显示原始元素都是0宽度。

PS。使用仅在

的情况下变化的ID确实是个坏主意

另请注意：

当JQuery中的每个ID都大致相同时，你通常不会为每个不同的id硬连线事件。如果你改变你的id非常独特（不仅仅是个案）你可以做类似的事情：

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

其中包含当前悬停项目的ID，附加一些唯一的内容，然后按ID更新匹配项目。

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

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

Answer 2

为了测试我已经给出了文本修饰，你用背景颜色替换它..

<强> HTML

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

<强> CSS

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

<强> JQuery的

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

});

Answer 3

正在工作 DEMO

试试这个

我编辑了你的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>

并将其添加到您的css

div.demo span {
    display:table-cell;
    width:100px;
}

或

试试这个

正在工作 DEMO

不改变任何html和css

只需将width:100px;添加到

即可

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

希望这有帮助，谢谢