0

私は http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/からJqueryマウスオーバーエフェクトを実行する方法を学んでいます。

この効果を持つ3つの別々のボタンを使用するにはどうすればよいですか？Divを複製すると、Divが重なるという問題が発生し続け、Divを互いに離すことができません。私の最初の質問が混乱していた場合は申し訳ありません！これが私のjsfiddleです：http： //jsfiddle.net/Japaneselanguagefriend/EgDqy/

<div class="fadehover"><img src="button 1" alt="" class="a" /><img src="button 1 roll" alt="" class="b" /></div>

<div class="fadehover"><img src="button 2" alt="" class="c" /><img src="button 2 roll" alt="" class="d" /></div>
4

2 に答える 2

2

正しい道を歩み始めるフィドルは次のとおりです。

http://jsfiddle.net/EgDqy/12/

<div class="cell">

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" display /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>


<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>

<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>​


$(".cell").hover(
   function() {
      $(this).find('.fader').fadeOut("slow");
   },
   function() {
      $(this).find('.fader').fadeIn("slow");
   }
);


.cell{ width:100px; display:inline-block; position:relative; }
.cell img { width:100px; position:absolute; top:0; left:0; }
于 2012-08-30T13:40:48.223 に答える
2

基本的に、div の内部要素は絶対位置に配置されているため、div には測定値がありません (これには専門用語がありますが、それは私を逃れます)。基本的に、div の幅と高さを明示的に設定する必要があります。CSS でこれを行うか、javascript/jquery で CSS を動的に生成できます。jqueryを使った例です。

http://jsfiddle.net/EgDqy/13/

例は何千もの単語を描きます。これは、他の人がこの質問を見れば問題を理解するのに役立つかもしれません. 右のボタンをクリック

http://jsfiddle.net/EgDqy/16/

于 2012-08-30T13:43:06.777 に答える