在鼠标悬停时更改 css 类答案

【问题标题】：change css class on mouse over在鼠标悬停时更改 css 类
【发布时间】：2011-11-07 09:03:45
【问题描述】：

嗨，我试图让我的导航栏在鼠标悬停时执行 css 焦点效果，因此它不会改变，直到另一个菜单项鼠标悬停。我正在尝试使用 Jquery 来实现。

这是我的代码（我确实导入了 jquery 脚本 btw 和我的 css 类）：

    <div id="topNav">
<a href="contact.html"class="topNavNormal"><div id="topNav4" class="topNavNormal">Contact Us</div></a>
<a href="about.html" class="topNavNormal"><div id="topNav3" class="topNavNormal">About Us</div></a>
<a href="services.html" class="topNavNormal"><div id="topNav2" class="topNavNormal">Services</div></a>
<a href="index.html" class="topNavActive"><div id="topNav1" class="topNavActive" style="border-left: 3px solid #c0c0c0;">Home</div></a>
<script type="text/javascript">
$(document).ready(function(){
$('#topNav1').mouseover(function(){
    $('#topNav1').removeClass().addClass('topNavActive'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav2').mouseover(function(){
    $('#topNav2').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav3').mouseover(function(){
    $('#topNav3').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav4').mouseover(function(){
    $('#topNav4').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
});
});
</script>
</div>

这也是我的 Css 类：

<style type="text/css">
#topNav1
{
text-align: center;
font-size: 18px;
float: right;
width: 50px;
height: 64px;
}
#topNav2
{
text-align: center;
font-size: 18px;
float: right;
width: 70px;
height: 64px;
}
#topNav3
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav4
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav1, #topNav2,  #topNav3{
border-right: 1px solid #c0c0c0;
}
#topNav4{
border-right: 3px solid #c0c0c0;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
</style>

【问题讨论】：

如果你不担心 ie6 使用 css 选择器 :hover htmldog.com/guides/cssintermediate/pseudoclasses
我尝试检查 css 选择器，但我没有看到可以将焦点放在鼠标悬停上（有一个悬停，但一旦你的鼠标离开它就会取消，但我只希望它当另一个菜单项突出显示时取消）。我也不能让用户点击聚焦，因为点击会转到新页面。
啊我不太明白，但现在我相信你的意思是最后一个悬停的项目将是这个“活动”类

标签： jquery css mouseover onmouseover

【解决方案1】：

试试这样的。

    $('.topnav_class').over(function(){
        // delete all the classes of hover
        $(.topnav_class).removeClass('hover');
        // add the hover class just to this node
        $(this).addClass('hover);
    }, function(){
        $(this).addClass('hover');
    });

你必须更多地使用 $(this)，这样你的 jQuery 才能更干一点（不要重复你自己）

【讨论】：

【解决方案2】：

如果您不关心 IE6 - 只需像 James 建议的那样使用 :hover。否则简化您的代码：

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).addClass('topNavActive');
        }, function () {
            $(this).removeClass('topNavActive');
        });
    });

如果你想模仿 :focus（但鼠标悬停）：

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).siblings().removeClass('topNavActive');
            $(this).addClass('topNavActive');
        }
    });

这是你需要的吗？

【讨论】：

问题是仍然是悬停。我试图让它像 css 选择器：focus 而不必单击以激活它（就像它在鼠标悬停时一样）。或者换句话说，我不希望它不再被突出显示，除非有别的东西。
第二个函数回调将在将鼠标移动到其他元素时删除突出显示。目前只会突出显示一个元素。
好的，我明天一起床就试试（我应该像 2 小时前一样睡着）。如果有效，我会将您的答案标记为已接受的答案（但前提是有效）。顺便说一句，感谢您为我澄清这一点。 =)
我不得不稍微调整一下代码的第二部分，但它现在可以工作了。谢谢您的帮助。如果没有帮助，我不会再花几周的时间来完成它。

【解决方案3】：

最好的做法是用纯 CSS 来解决它（根本不用任何 jQuery）。这是一个简单的例子：

<style type="text/css">    
    .navItem { 
        background: yellow;
     }
    .navItem:hover { 
        background: blue;
    }
</style>

【讨论】：

不会为我需要它做的事情工作，因为我希望它像 :focus css 选择器一样，因为它像悬停一样被激活（但仅适用于 topNav 项目）。它必须激活悬停焦点，单击它会打开链接。

【解决方案4】：

.topNavNormal{
    background-color: #B0E0E6;
}

a .topNavNormal{
    line-height: 54px;
    color: #42647F;
}

如果你不在不同的地方使用这些，我会合并它们，然后你就可以了

a .topNavActive{    
    line-height: 54px;
    color: #00EEEE;
    background-color: #5F9EA0;    
}

还有一个简单的 javascript，例如：

$('topNavNormal').mouseover(function(){
    $('topNavNormal').removeClass('topNavActive');
    $(this).addClass('topNavNormal');
});

【讨论】：

【解决方案5】：

这对我有用

$(".panel").hover(function () {
    $(this).addClass('panel-info');
    $(this).removeClass('panel-warning');
}, function () {
    $(this).removeClass('panel-info');
    $(this).addClass('panel-warning');
});

【讨论】：

【解决方案6】：

这对我有用。如果你想用引导程序做一些令人兴奋的事情。试试这个：

 $(".small").hover(function () {
        $(this).addClass('lead');
        $(this).removeClass('small');
    }, function () {
        $(this).removeClass('lead');
        $(this).addClass('small');
    });

【讨论】：