1

我正在尝试使用 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");
});

我很感激任何关于如何解决这个问题的建议。谢谢你。

4

5 回答 5

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");
});​
于 2012-04-06T03:53:44.643 回答
0

试试这个代码

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

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

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

于 2012-04-06T03:36:16.897 回答
0

这是您的 jQuery 的一个想法：

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

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

于 2012-04-06T03:38:15.847 回答
0

试试这个代码

$(".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");
});
于 2012-04-06T03:39:35.913 回答
0

理论：您不会将 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（我相信它更快）。

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

于 2012-04-06T03:26:39.017 回答