使用 jquery 更改鼠标悬停（按钮）时外部 div 的背景颜色答案

【问题标题】：change of background color of outer div on mouse hover (button) using jquery使用 jquery 更改鼠标悬停（按钮）时外部 div 的背景颜色
【发布时间】：2014-05-08 04:59:11
【问题描述】：

我设计了一个弹出式窗口，它有一个标题栏和内容部分。在里面，内容部分我也放了一个按钮。我正在尝试更改标题栏的背景颜色。我制作了两个类（title_bar 和title_bar_hover），其中仅包含background: linear-gradient(); 属性。根据此 stackoverflow thread 中给出的解决方案，我编写了以下 jquery。我也添加了jquery-ui 插件。

$('#start').on('hover',function(){
    var target = $('.title_bar');
    target.addClass(".title_bar_hover");
},5);

但此代码无法执行任何操作。但是，这里是示例jsfiddle。因此，请提出一些方法来实现此功能。
非常感谢！

【问题讨论】：

没有调用hover的事件，需要使用hover方法或者mouseenter和mouseleave事件
见jsfiddle.net/arunpjohny/9cLtX/1
哦..对不起对不起..！谢谢@ArunPJohny ..!!!

标签： javascript jquery html css

【解决方案1】：

你需要：

1) 在 jsFiddle 演示中包含 jQuery

2) 使用 .hover() 代替 .on('hover',...

3) 使用 .toggleClass() 代替 .addClass()

4) 在您的 CSS 中将类名更正为 title_bar_hover

$('#start').hover(function () {
    var target = $('.title_bar');
    target.toggleClass("title_bar_hover");
});

Updated Fiddle

【讨论】：

【解决方案2】：

你可以这样做：

$('#start').on('mouseover',function(){
        var target = $('.title_bar');
        target.toggleClass("title_bar_hover");
        });

$('#start').on('mouseout',function(){
        var target = $('.title_bar');
        target.toggleClass("title_bar_hover");
        });

FIDDLE EXAMPLE

【讨论】：

这可以简化为：$('#start').hover(function() {$('.title_bar').toggleClass('title_bar_hover');});
为什么要使用？
最新的 jquery 事件是使用 on 编写的，所以我更喜欢使用 on

【解决方案3】：

有了这个，你可以在悬停时轻松切换类。

$('.title_bar').hover(function(){
         $('.title_bar').toggleClass('title_bar_hover');
    }, function(){
         $('.title_bar').toggleClass('title_bar_hover');
    });

希望对你有用:)

JSBIN demo

【讨论】：