Question

我正在尝试用jQuery做手风琴。鼠标悬停时，应将颜色更改为橙色，同时保留背景图像。关于mouseleave的同样的事情，但我无法得到它。如何使用jQuery添加多个背景？

这是我正在使用的代码：

$(".wrap-faq").on("mouseover", hoverFaq);

function hoverFaq() {
  $(this).css("background", "#f7941e");
  $(this).css("backgroundImage", "url(...img/bkg_leer_artic.png) center repeat");
}

$(".wrap-faq").on("mouseleave", unHoverFaq);

function unHoverFaq() {
  $(this).css("background", "#e0e0e0");
  $(this).css("backgroundImage", "url(...img/bkg_leer_artic.png) center repeat");
}

我也在点击按钮时尝试添加active类，因此它保持橙色，但这也不起作用。

jQuery的：

$(".wrap-faq ").on("click", accordion);
function accordion() {
  if (!$(this).hasClass("active")) {
    $(".wrap-faq ").next().slideUp();
    $(this).next().slideToggle();
    $(".wrap-faq ").removeClass("active");
    $(this).addClass("active");
  }
}

CSS：

.active {
background:#f7941e url("../img/bkg_leer_artic.png") center repeat;
}

.wrap-faq {
background:#e0e0e0 url("../img/bkg_leer_artic.png") center repeat;
margin-bottom:2px;
cursor:pointer;
}

这是我的JSFiddle：http://jsfiddle.net/xtatanx/3zvgY/5/

Answer 1

Fiddle

要保留橙色，您需要在规则中添加！important以覆盖内联mouseout样式：

.faq.active {
    background: #f7941e !important; 
}

就背景图像而言，您需要将它们放在某个照片托管网站上，然后在jsFiddle上从该托管网站引用它们的链接，以便我们可以在那里看到它们。

Answer 2

我看到很多人用.css()操纵元素。这可能令人沮丧并且难以排除故障，因为所有这些更改都应用于内联样式。

相反，请尝试使用toggleClass()，.addClass()和.removeClass()。然后，您的样式将以更有条理，更易于操作的格式定义，而不是添加多个.css()函数。既然你已经在CSS中预先定义了这些样式，我不明白为什么你会使用.css()。

Answer 3

我正在努力了解你正在尝试做什么，但我认为你想要在保留背景图像的同时改变背景颜色。

这个小提琴显示了我是如何做到的（~~为图像道歉~~ - 实际上，我并不为图像道歉，SuperDog规则）。 http://jsfiddle.net/Town/MtFa4/

您正在使用background，这是所有background- CSS声明的快捷方式，因此当您执行

时

$(this).css("background", "#e0e0e0");

您正在覆盖background-image声明。

使用jQuery添加多个背景

3 个答案: