1

考虑这个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');
    });

});
4

3 回答 3

2

悬停前的单元格没有宽度

在这里工作 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 更改为真正独特的（不仅仅是按情况），您可以执行以下操作：

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

它采用当前悬停项目的 id，附加一些唯一的内容，然后通过 id 更新匹配的项目。

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

那应该在保留原始结构的同时清理东西。

于 2013-09-10T10:51:12.370 回答
0

工作演示

尝试这个

我已经编辑了你的 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;
}

或者

尝试这个

工作演示

无需更改任何 html 和 css

只需添加 width:100px;到

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

希望这有帮助，谢谢

于 2013-09-10T11:09:55.710 回答
0

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

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

});
于 2013-09-10T11:05:38.723 回答