Question

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

我正在思考以下几点：

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

这是JSFiddle

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

Answer 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;}

希望这会有所帮助。：）

Answer 2

这应该这样做

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

});

Answer 3

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

边栏上的侧边栏更改类别背景颜色（jsFiddle）

3 个答案: