0

jQueryでアコーディオンをやろうとしています。マウスオーバーすると、色がオレンジ色に変わりますが、背景画像も保持されます。マウスリーブでも同じことですが、うまくいきません。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 を追加して、インライン マウスアウト スタイルをオーバーライドする必要がありました。

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

背景画像に関する限り、それらを写真ホスティング サイトに配置し、jsFiddle でそのホスティング サイトからのリンクを参照して、そこで表示できるようにする必要があります。

于 2013-04-11T15:23:31.110 に答える
0

で要素を操作している人をたくさん見かけます.css()。これらの変更はすべてインライン スタイルに適用されるため、これはイライラし、トラブルシューティングが難しい場合があります。

代わりに、 と を使用してみtoggleClass()て.addClass()ください.removeClass()。次に、複数の関数を追加するのではなく、より整理された操作しやすい形式でスタイルを定義し.css()ます。また、これらのスタイルは既に CSS で事前定義されているため、とにかく使用する理由がわかりませ.css()ん。

于 2013-04-11T15:08:44.250 に答える
0

あなたがやろうとしていることを正確に理解するのに少し苦労していますが、背景画像を保持しながら背景色を変更したいと考えています。

このフィドルは、私がそれを行う方法を示しています（画像についてはお詫びします-実際には、画像についてはお詫びしません、SuperDogルール）。 http://jsfiddle.net/Town/MtFa4/

すべてのCSS 宣言backgroundのショートカットである を使用しているため、background-

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

background-image宣言を上書きしています。

于 2013-04-11T15:34:55.327 に答える