0

我正在尝试用 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/

4

3 回答 3

1

小提琴

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

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

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

于 2013-04-11T15:23:31.110 回答
0

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

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

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

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

您正在覆盖background-image声明。

于 2013-04-11T15:34:55.327 回答
0

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

相反，请尝试使用toggleClass(),.addClass()和.removeClass()。然后，您的样式以一种更有条理且更易于操作的格式定义，而不是添加多个.css()功能。而且由于您已经在 CSS 中预定义了这些样式，所以我不明白您为什么要使用这些样式.css()。

于 2013-04-11T15:08:44.250 回答