0

我正在为我的网站制作侧边栏。当用户将鼠标悬停在某个类别上时，会打开一个子菜单，当用户将鼠标悬停在该子菜单上时，我希望相应的类别背景颜色发生变化。我创建了一个 jsfiddle 来帮助说明我的问题。我感谢在这方面的任何帮助。

我在想一些事情：

$(".sidemenu").hover(function(){
    $("category").closest().parent().css("background-color","red");
});

这是 JSFiddle

http://jsfiddle.net/ahren/BGcDc/8/

4

3 回答 3

1

我刚刚编辑了您的 CSS 以将父级更改background colour为white. 编辑后的代码在这里：

$(".category").hover(function() {
    $(".submenu").hide();
    $(this).find(".submenu").show().parent().css('background', '#fff');
    $(this).find(".submenu li:eq(0)").css("border-top", "1px solid blue");
    $(this).find(".submenu li:last").css("border-bottom", "1px solid blue");
    $(this).find(".submenu li:first").css("border-left", "none");
    $(this).css("border-bottom", "none");
    $(this).css("width", "205px");
    $(this).css("border", "1px solid blue");
    $(this).css("border-top", "1px solid blue");
    $(this).css("border-right", "none");
});
$(".category:last").css("border-bottom", "1px solid grey");
$(".category").mouseleave(function() {
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});
$(".submenu,#sidebar").mouseleave(function() {
    $(".submenu").hide();
    $(".category").css("width", "180px");
});​

还可以在下面找到相同的 CSS：

.category{text-decoration:none; border:1px solid grey; border-bottom:none; width:180px; padding:3px 8px 4px 30px; background-color:#eee;}
.submenu{list-style-type:none; background-color:#eee; width:200px; position:absolute; display:none; margin-left:189px; margin-top:-24px; box-shadow:4px 4px 9px #333;}
.submenu li{padding:3px 8px 4px 10px;  border-left:1px solid blue; border-right:1px solid blue; border-top:1px solid #bbb; border-bottom:none; margin-left:0px; background: #fff;}

希望这可以帮助。:)

于 2012-06-06T18:56:57.373 回答
1

这应该这样做

$(".submenu li").mouseenter(function() {
    $(this).parent().parent().css("background-color","yellow");

});
于 2012-06-06T18:58:36.340 回答
1

尝试$(this).css('background-color','red');在你的$(".category").hover();函数中添加它。由于您使用$(this)了很多次，因此您应该尝试将其缓存在变量中以获得最佳实践。

于 2012-06-06T18:59:45.960 回答