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

Changing background-color on hover not working properly using jquery

本文关键字：常工作 工作 颜色 悬停 jquery 背景 使用      更新时间：2023-09-26

我正在尝试使用JQuery更改悬停时的菜单选项背景颜色。我所有的代码都运行良好，我遇到的唯一问题似乎与 CSS 相关。当背景颜色发生变化时，它似乎只改变文本的背景颜色，而不是整个div，这就是我想要的。我觉得奇怪的是，当我进入menuOption元素的内联CSS并手动更改背景颜色时，它会更改整个divs背景颜色（这就是我想要的）。但是，我需要使用 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");
});

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

这应该可以做你想要的：

示例：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");
});​

理论：你不会把你的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的方式（我相信这更快）。

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

试试这个代码

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

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

单独编码$（这个）.css（....）$（"菜单选项"）.css（...）因为 $（this） 返回对象，它不会给出标签名称，所以你不能那样写。

以下是对jQuery的一个想法：

如果你打算使用 find（） 来搜索 DOM

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

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

试试这段代码

$(".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");
});
相关文章：