1

画像とロールオーバー画像があります。jQuery または CSS を使用して、親 div (画像を含む) で onmousemove/onmouseout イベントが発生したときに、ロールオーバー画像を表示/非表示にしたいと考えています。

どうすればいいですか？

編集：リクエストにより以下に投稿されたHTML。質問とは関係ありませんが、参考までに、HTML は 30 列の流動グリッド上に構築されています。

一番上の div (row-fluid) にカーソルを合わせると、画像 (image.png) が別のソース画像 (imagehover.png) に変わるはずです。

<div class="row-fluid" style="padding-top:1em">
            <div class="span4">
              //Random content
            </div>
            <div class="span8 offset1">
              //Random content
            </div>
            <div class="span9 offset3">
              <ul>
                <li>//Random content</li>
                <li>//Random content</li>
                <li>//Random content</li>
             </ul>
            </div>
            <img src='../../images/image.png>
<div>
4

6 に答える 6

9

あなたはこのようなことをしたい：full_path_to_css parent:hover child

full_path_to_css parent:hover child {
  styles for your item
}

例えば：

html (div.img は何でもかまいません):

<div class="parent">
  <div class="img">
  </div>
</div>​​​​​​​​​​​​​​​​​​

CSS:

div.​parent​ {
  width:200px;
  height:200px;
  background-color:red;
}
div.img {
  width:100px;
  height:100px;
  background-color:blue;
}

div.parent:hover div.img {
  background-color:green;
}​

ここでチェックをテストしたい場合: http://jsfiddle.net/NicosKaralis/kd6wy/

divwithimgクラスは任意の要素にすることができますが、そうである必要はなく、必要に応じてcssdivスタイルを変更できます。監視する必要があるのは、parent:hover child

編集

1つのことを明確にするために：アイテム:hoverは、ホバーアクションを検出したい魔女の親でありchild、CSSルールを変更したい魔女のアイテムです

もう一度編集

<div id="parent" class="row-fluid" style="padding-top:1em">
        <div class="span4">
          //Random content
        </div>
        <div class="span8 offset1">
          //Random content
        </div>
        <div class="span9 offset3">
          <ul>
            <li>//Random content</li>
            <li>//Random content</li>
            <li>//Random content</li>
         </ul>
        </div>
        <img class="child" src='../../images/image.png>
<div>

あなたのコードでは、次のものが必要です。

div#parent.row-fluid img.child {
  display:none;
}
div#parent.row-fluid:hover img.child {
  display:block;
}

これにより、マウスがdivの上にある場合にのみ画像が表示されます

于 2012-07-17T20:34:28.613 に答える
2

mouseover および mouseout イベント ハンドラーを親 div にアタッチし、それを含む img 要素を操作するのと同じくらい簡単なはずです。

var rolloverImage = ...
var origImage = ...
$("#parentDivId")
       .mouseover(function() {
          $("#parentDivId img").attr("src", rolloverImage)
       })
       .mouseout(function() {
          $("#parentDivId img").attr("src", origImage)
       })
于 2012-07-17T20:39:14.733 に答える
1

テストするHTMLがなくても、これは頭の中で考えただけです。うまくいくかどうかはわかりませんが、うまくいかない理由がわかりません。

$('div').mouseenter(function() {
    var image = $('img', this);

    $(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
    var image = $('img', this);

    $(image).attr('src', 'old-image-src.jpg');
});
于 2012-07-17T20:34:43.350 に答える
1

試す：

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
    $(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});​

jsFiddle の例

于 2012-07-17T20:34:50.800 に答える
0

他の人のコメントと回答の要素を使用してハイブリッドを作成したため、自分の質問に答えます。スプライト、完全な CSS ソリューションです。これが最適だと思います。

@gilly3 氏によると、「画像の切り替えはスプライトを使用して行うのが最適です。これにより、画像間の切り替えに遅延が発生することはありません。画像の両方のバージョンを 1 つのファイルに並べて配置します。その画像を div の背景に設定し、背景の位置を調整して、いずれかの画像を表示します。」この例では、em 値を使用して、96px (高さ) x 27px (幅) のスプライトを使用します。

HTML の img 行を次のように置き換えます。

<div class="sprite-image"></div>

CSS: 

.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}

.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}
于 2012-07-17T23:34:51.533 に答える
0

このコードを使用して、「ロールオーバー画像の表示/非表示」を行うことができます

#parentDiv > img {
  display: none;
}
#parentDiv:hover > img {
  display: block;
}

の直接の子孫であるタグ>を選択できます(外側の div にその ID を与えました)。次に、通常の状態とホバー状態で異なるスタイルを設定しています。img#parentDiv

于 2012-07-17T20:36:59.577 に答える