使用 jquery 更改悬停时的背景颜色无法正常工作

Question

我正在尝试使用 JQuery 更改悬停时的 menuOption 背景颜色。我所有的代码都可以正常工作，我遇到的唯一问题似乎与 CSS 相关。当背景颜色改变时，它似乎只改变了文本的背景颜色，而不是整个 div，这就是我想要的。我发现奇怪的是，当我进入 menuOption 元素的内联 CSS 并手动更改背景颜色时，它会更改整个 div 的背景颜色（这是我想要的）。但是，我需要使用 JQuery 来实现。

标记片段

<div class='menuOption' style='list-style-type:none; border:1px solid red; float:left; width:180px; height:20px;'>
<a href='index.php/shop/$sub[cat_url]/' style='color:black;'>
<div class='cat_name'>$sub[cat_title]</div>
</a>
<div class='sub_menu' style='display:none; z-index:100; margin-top:-12px; position:absolute; background-color:#ddd; margin-left:182px; box-shadow:3px 3px 6px #444;'>$itemlist</div>
</div>

JQuery 代码段

$(".cat_name").hover(function(){
    $(this).parent().parent().find(".sub_menu").show();
    $(this, ".menuOption").css("background-color", "#bbb");
});
$(".cat_name").mouseleave(function(){
    $(this, ".menuOption").css("background-color", "#eee");
});

感谢任何有关如何解决此问题的建议。谢谢。

Answer 1

这应该做你想做的：

示例：http://jsfiddle.net/jrDph/3/

$(".cat_name").hover(function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").show();
    $menuOption.css("background-color", "#bbb");
},
function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").hide();
    $menuOption.css("background-color", "#eee");
});​

Answer 2

理论：您不会将 JavaScript 置于“在文档加载后执行此操作”块中。看起来像这样：

$.fn.ready(function() {
    $(".cat_name").hover(function(){
        $(this).parent().parent().find(".sub_menu").show();
        $(this, ".menuOption").css("background-color", "#bbb");
    });
    $(".cat_name").mouseleave(function(){
        $(this, ".menuOption").css("background-color", "#eee");
    });
});

作为参考，$.fn.ready 是$(document).ready 的另一种说法（我相信它更快）。

不过，这可能完全是一个单独的问题。

Answer 3

试试这个代码

http://jsfiddle.net/jt795/1/

$(this, "menuoption") it's not the rightway

单独编码 $(this).css(....) $("menuoption").css(...) 因为 $(this) 返回的对象它不会给出标记名，所以你不能这样写。

Answer 4

这是你的 jQuery 的一个想法：

如果你打算使用 find() 向下搜索 DOM，那么你应该使用最接近的() 向上搜索 DOM（而不是 .parent().parent()）。您可以输入 .closest('div') 或 .closest('.menuOption')。然后，如果您决定需要添加另一个包含猫名称的元素，则不必添加另一个 parent() 调用。一个方法调用通常比多个方法调用要好。

另外，我正在成为咖啡脚本的大力倡导者。 http://coffeescript.org/。如果你有心情学习一些新东西，你应该研究一下。它编译成 javascript，看起来很像 javascript 减去所有的括号、括号和分号。易于阅读的代码是最好的代码！

Answer 5

试试这个代码

$(".cat_name").hover(function(){
  $(this).parent().parent().find(".sub_menu").show();
  $(this).css("background-color", "#bbb");
  $(".menuOption").css("background-color", "#bbb");
}, function(){
  $(this).css("background-color", "#eee");
  $(".menuOption").css("background-color", "#eee");
});