1

次のようなテーブルがあります。

<div class="footer_row_3">
   <table class="tableA">
      <tr>
         <td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
         <td><span class="statement">Lorem Ipsum</span></td>
         <td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
      </tr>
   </table>
</div>

私がやりたいことは、マウスがtableA内の任意の場所に移動するtableAと、次の 2 つの変更が発生することです。

  1. ポップコーンの画像は次の画像に変わります。http://i.imgur.com/K29T3Fw.png
  2. テキストの色が赤に変わります。

  • transitionコンテンツが更新されたスタイル コンテンツにフェードインするように、CSS 'fade' styleを使用する必要があります。

  • tableA内の任意の場所からホバーすると、上記の両方の変更が発生するはずtableAです。

ホバー時にテキストと画像を個別に変更する方法は知っていますが、複数のアイテムをまとめて変更する方法はわかりません。

どうすればこの効果を達成できますか?

4

3 に答える 3

0

これを試して：

CSS

span{
    transition: color 2s ease;
}
.tableA:hover span{
    color:red;
}

プレーン Javascript (オプション 1)

document.getElementsByClassName('tableA')[0].onmouseover = function () {
    var images = document.getElementsByClassName('popcorn');
    console.log(images);
    for (i = 0; i < images.length; i++) {
        images[i].src = 'http://i.imgur.com/K29T3Fw.png'
    }
};

デモはこちら

jQuery (オプション 2)

$('.tableA').hover(function () {
    $('.popcorn').prop('src', 'http://i.imgur.com/K29T3Fw.png');
});

デモはこちら

編集：

新しいデモはこちら

于 2013-09-14T19:27:47.717 に答える
0

ある要素が他の要素の子である場合、他の要素のデータ/スタイルのホバーと変更が可能です

これがあなたが進めることができる可能な方向であり、それはうまくいきます

#parent_element:hover > child_element {
    //change your required styling or images
}

リンクはこちら

ホバーして変更

于 2013-09-14T19:28:45.643 に答える