考虑这个 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');
});
});
最佳答案
悬停前单元格上没有宽度
在这里工作 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/
这应该会在保留原始结构的同时进行清理。
关于javascript - 鼠标输入和鼠标效果无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18716841/