穆森特和鼠标效果无法正常工作

mousenter and mouse effect not working properly

本文关键字：常工作 工作 鼠标      更新时间：2023-09-26

考虑这个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/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 更新匹配的项目。

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

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

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

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

杰奎里

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

并将其添加到您的 CSS 中

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

或

试试这个

工作演示

无需更改任何 HTML 和 CSS

只需添加width:100px; 

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

希望这有帮助，谢谢

相关文章：