当鼠标悬停时更改CSS类

Question

你好，我正在尝试让我的导航栏在鼠标悬停时实现 CSS focus 效果，直到另一个菜单项被悬停。我正在尝试使用 jQuery 实现。

这是我的代码（我已经导入了 jQuery 脚本，我的 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>

- Matthew

---

如果您不需要考虑IE6，请使用CSS选择器:hover。http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ - James Khoury

我尝试检查CSS选择器，但没有一个适用于鼠标悬停的焦点（有一个悬停，但它会在鼠标离开时取消，但我只想在另一个菜单项被突出显示时才取消）。此外，我不能让用户点击以获得焦点，因为点击将转到新页面。 - Matthew

啊，我之前不太理解，但现在我相信你的意思是最后一个被悬停的项目将成为这个“active”类。 - James Khoury

Answer 1

如果你不关心IE6，那就像James建议的那样使用:hover。否则，请简化你的代码：

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

如果你想模拟:focus（但是用mouseover）：

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

这是你需要的吗？

- Samich

---

问题在于它仍然是一个悬停状态。我试图让它像CSS选择器:focus一样，而无需单击即可激活它（就像在鼠标悬停时一样）。换句话说，除非有其他东西，否则我不希望它不再突出显示。 - Matthew

第二个函数回调将在鼠标移动到其他元素时取消高亮显示。同时只有一个元素会被突出显示。 - Samich

好的，我明天一起床就试试（其实我应该在两个小时前就睡觉了）。如果它有效，我会将你的答案标记为被采纳的答案（但只有在它有效的情况下）。顺便说一句，谢谢你为我澄清这个问题。=） - Matthew

我不得不微调代码的第二部分，但现在它可以工作了。感谢您的帮助。如果没有您的帮助，我可能需要再花费几个星期才能完成它。 - Matthew

Answer 2

最佳实践是使用纯CSS解决它（完全不需要任何jQuery）。以下是一个快速示例：

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

- Michael

---

无法满足我的需求，因为我希望它像:focus CSS选择器一样，但只在顶部导航项上激活，就像悬停一样。它必须在悬停时激活焦点，点击它将打开链接。 - Matthew

Answer 3

尝试像这样做。

    $('.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代码更加DRY（不要重复自己）。

- Michael Koper

Answer 4

这对我有效

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

- Lucas Fernandez Roldan

Answer 5

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

- James Khoury

Answer 6

这对我很有效。如果你想用Bootstrap做一些令人兴奋的事情，请尝试这个：

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

- imrvasishtha