javascript - 使用 jquery 在鼠标悬停(按钮)时更改外部 div 的背景颜色

Question

我设计了一个弹出式窗口，它有一个标题栏和内容部分。在里面，内容部分我也放了一个按钮。我正在尝试更改标题栏的背景颜色。我制作了两个类(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 .因此，请提出一些实现此功能的方法。
非常感谢!

Answer 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