使用 jquery 更改 hover 上的背景颜色无法正常工作

Question

我正在尝试使用 JQuery 更改 hover 上的 menuOption 背景色。我的所有代码都工作正常，我遇到的唯一问题似乎与 CSS 相关。 当背景颜色发生变化时，它似乎只改变了文本的背景颜色，而不是整个 div，这正是我想要的。 我觉得奇怪的是，当我 go 进入 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) 返回 object 它不会给出标记名，所以你不能这样写那。

Answer 4

这是您的 jQuery 的想法：

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

此外，我正在成为coffeescript.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");
});