Question

我有一个包含多个菜单项的菜单栏。

menubar with menu items

菜单栏是 div ，其中包含菜单项（也是 divs ），并且每个菜单项内部都有 href 。

这是HTML：

<style>
.menubar-style {
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center;
}
.menuitem-style {
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid;
}
</style>
...
...
<div class="menubar-style">
    <div class="menuitem-style"><a href="#">Link 1</a></div>
    <div class="menuitem-style"><a href="#">Link 2</a></div>
    <div class="menuitem-style"><a href="#">Link 3</a></div>
</div>

当光标位于链接顶部时，我想要做的是更改菜单项的背景颜色（ div ，而不仅仅是 href ）。

如何从链接捕获鼠标悬停事件并使用它来绘制整个菜单项的背景颜色？

更好的是，有没有办法检查鼠标是否在整个菜单项上（ div 而不仅仅是链接）？这将是一个更好的选择，因为菜单项会随着鼠标在盒子的任何地方改变颜色，而不仅仅是链接。

先谢谢！

扬

Answer 1

您可以简单地将:hover选择器添加到任何预定义样式，以便仅在鼠标悬停在该特定对象上时应用它

.menuitem-style:hover {
    background-color: red;   // only changes to red if the mouse is hovering.
}

Answer 2

你必须使用一些javascript或jQuery才能做到这一点。但是，当你将鼠标移到div上时，更容易改变div的颜色。

在<head>：

中添加此内容

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

您应该在<a>标记中添加一个类，让我们调用此类menu-link。因此，<a href="#">Link 1</a>代替<a href="#" class="menu-link">Link 1</a>，而不是<head>。

现在，您可以将以下jQuery代码添加到<script> $('a.menu-link').hover(function() { $(this).parent().css('background-color', 'red'); }, function() { $(this).parent().css('background-color', 'white'); } </script>：

<a>

此jQuery代码将更改<div>标记的父级的背景颜色，在本例中为{{1}}标记。

当用户将鼠标悬停在包含在内的HREF时，如何更改DIV的背景颜色？

2 个答案: