0

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

带有菜单项的菜单栏

菜单栏是一个包含菜单项（也是divs ）的div，并且在每个菜单项内部我都有一个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 ）的背景颜色。

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

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

提前致谢！

简

4

2 回答 2

2

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

.menuitem-style:hover {
    background-color: red;   // only changes to red if the mouse is hovering.
}
于 2012-11-10T07:28:03.490 回答
0

您必须使用一些 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>.

现在，您可以将以下 jQuery 代码添加到您的<head>:

<script>
     $('a.menu-link').hover(function()
     {
         $(this).parent().css('background-color', 'red');
     }, function()
     {
         $(this).parent().css('background-color', 'white');
     }
</script>

此 jQuery 代码将更改<a>标签父级的背景颜色，在本例中是您的<div>标签。

于 2012-11-10T07:35:07.560 回答