我有一个菜单，它可以在悬停时更改链接背景图像，并为每个链接替换该菜单“框架”中的中心图像。 我需要做的是使菜单的第一个链接显示为好像一直悬停，并且它的中心图像也显示，但是一旦悬停其他菜单链接之一，它应该被关闭。 有什么想法吗？
【问题讨论】：
想法：将所有按钮包装在一个新的 div 中，当您将鼠标悬停在该 div 上时，删除第一个按钮的样式，除非您悬停第一个按钮，然后在悬停时按照您的需要设置每个按钮的样式
html:
<div class='home_gallery'>
<div id='buttons'>
<a class='mofet-link' href='mofet'><img....></a>
<!-- the rest of the a tags -->
</div>
</div>
css:
.mofet-link {
//set the state you want initially, like when the mose hover over it
}
#buttons:hover .mofet-link {
//set the state as NOT hovered
}
.mofet-link:hover {
//set the state as hovered
}
现在，默认值将是规则 .mofet-link（悬停）给出的值，当您将鼠标悬停在任何按钮上时，css 将是 #buttons:hover .mofet-link（未悬停）处的值，除非您悬停 mofet-link，否则应用的规则将是 .mofet-link:hover (hovered)
您可以稍微调整一下订单或使用类似的东西：
.mofet-link:hover {
background: your_background !important;
}
如果您有其他 css 以更高的优先级覆盖您想要的内容，或者编写一个更精确的选择器。
希望对您有所帮助。
【讨论】：
一般来说，你不能只用css控制一个父元素，所以你必须做一些技巧：
例如，如果您有一个多级菜单，您可以保留应用于父元素的样式，只需编写如下内容：
ul li:hover li
{
...
}
这样，假设鼠标悬停在嵌套的 LI 上，也会将样式应用于父级，例如主栏中的主列表项。
如果你没有多级菜单，你无论如何都可以在 html 中声明它，并将所有内容风格化以显示为所有同等级别的链接，以达到你的目标;-)
评论后更新 这里是jquery代码：
jQuery( document ).ready(function() {
$('.home-gallery a').hover(
function() {
$('.mofet-link').removeClass( "active" );
$('.mofet-link img').removeClass( "active_img" );
},
function()
{
$('.mofet-link').addClass( "active" );
$('.mofet-link img').addClass( "active_img" );
});
});
你还必须修改你的css，添加一些规则：
.active_img, .mofet-link:hover img {
display: block !important;
max-height: 250px !important;
max-width: none;
right: 220px;
top: 20px;
}
.active, .mofet-link:hover {
background-image: url("http://www.israelijewel.com/websites/mishne-torah/wp-content/themes/twentyfourteen-child/images/gallery/mofet-button.jpg");
background-position: right 4px top 6px;
background-repeat: no-repeat;
margin-bottom: 0;
margin-top: 0;
}
并且，为了正确运行 jQuery，请将其放在页面的 HEAD 部分。例如：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
【讨论】：