3

DIV のバックグラウンドの問題についてサポートが必要です。たとえば、6 つの列を含む価格表スクリプトを作成したいと考えています。

<div id="col1">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
<div>
<div id="col2">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
<div>
.
.
.
.
<div id="col6">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
<div>

背景画像を、ホバーされた親を持つすべての div に変更したいと考えています。ホバーdiv "col6"すると、そこからのすべての div で背景画像が変更されます。すべての列に同じクラスを使用していることに注意してください。変更する必要があるのは、ホバーされているメイン div の 1 つだけです。

このコードスニペットを見つけましたが、私の状況で動作するように適応させる方法がわかりません (JavaScript の知識が非常に低いため)。

 $(function() {
    $('.parent').hover( function(){
       $(this).children("div").css('background-color', 'gray');
    },
     function(){
       $(this).children("div").css('background-color', 'red');
    });
 });

ありがとう、そしてすべてが理にかなっていることを願っています

4

3 に答える 3

2

コンテナー要素にはクラス属性がないため、attribute starts withセレクターを使用できます。

$(function() {
    $('div[id^=col]').hover(function() {
         $(this).children("div").css('background-image', 'url("heaven.png")');
    }, function() {
         $(this).children("div").css('background-image', 'url("hell.png")');
    });
});
于 2012-10-07T20:59:21.290 に答える
1

次のように、CSS を使用してこれを行うことができます。

#col6:hover div
{
    background-color:#000;
}

フィドルを参照してください: http://jsfiddle.net/nTAzk/

次に、すべての親 (.parent-class など) にクラスを追加し、列ごとに 1 回実行します。

于 2012-10-07T20:59:57.017 に答える
0

まず、「div」要素を適切に閉じる必要があります。

<div id="col6">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
<div> <-- HERE NEED TO BE "</div>"

次に、クラスを追加できます（したがって、変更col[N]したfoo[N]場合でも、スクリプトを編集する必要はありません。

<div id="col1" class="sample-class">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
</div>
<div id="col2" class="sample-class">
  <div class="header"></div>
  <div class="first_line"></div>
  <div class="second_line"></div>
  <div class="footer"></div>
</div>

第三に、次のコードを使用します。

$(document).ready(function() {
    $('.sample-class').hover(function(){
        $(this).children('div').css('backgroundColor', 'gray');
    }, function(){
        $(this).children('div').css('backgroundColor', 'red');
    });
});

http://jsfiddle.net/4g2Kj/を参照してください

于 2012-10-07T21:05:19.453 に答える