0

だから私は他のページにリンクする必要がある3つの写真を持っています、そしてそれはホバリングでフェードインします。しかし、画像がCSSのブロックに配置されると、jqueryの影響が無効になることに気付きました。そして解決策は？

CSS：

div {
display: none;
width: 600px;
margin: auto;
}

.row_1 img{
    width: 300px;
    height: 300px;
}

.row_2 img{
    width: 150px;
    height: 150px;
}

.row_1,
.row_2{
    display: inline-block;
}

.row_2 img{
    display: block;
}
.row_1 img{
    display: block;
}

Htmlコード：

<div>



<h2>Blog</h2>




<div class ="row">

<span class ="row_1">
<a href="#"><img src="image/under.png" /></a>
</span>

<span class ="row_2">
<a href='#'><img src="image/under.png" /></a>
<a href="#"><img src="image/under.png" /></a>
</span>

</div>


</div>

jquery：

$(document).ready(function(){
     $('a').fadeTo(1,0.5);


  $('a').hover(
      function () {
       $(this).fadeTo('slow',1);
      }, 
      function () {
         $(this).fadeTo('slow',0.5);
      }
    );      

});

$(document).ready(function(){
$('div').fadeIn('slow');
});
4

2 に答える 2

0

をに変更しdisplayてblockも違いはありません。

ここにコードを貼り付けましたが、機能しているようです。

http://jsfiddle.net/jtbowden/cG8c9/

あなたの問題はおそらく他の場所にあります。jsfiddleで再現できますか？

また、あなたがあなたの例を一般化しているかどうかはわかりませんが、セレクターだけでjQueryを実行することは避けたいと思いますdiv。メインラッパーにIDを付けて、それを使用します。また、フェードエフェクトの前に追加.stop()します。そうしないと、マウスイン/マウスアウトが速すぎるとサイクリング動作が発生します。

$(document).ready(function() {
    $('a').fadeTo(1, 0.5);
    $('#wrapper').fadeIn('slow');

    $('a').hover(function() {
        $(this).stop().fadeTo('slow', 1);
    }, function() {
        $(this).stop().fadeTo('slow', 0.5);
    });
});

デモ： http： //jsfiddle.net/jtbowden/cG8c9/1/

編集： IEでテストしたところ、リンクでフェードがまったく機能しないことがわかりました。この場合、画像をフェードする必要があります。

$(document).ready(function() {
    $('img').fadeTo(1, 0.5);
    $('#wrapper').fadeIn('slow');

    $('a').hover(function() {
        $('img', this).stop().fadeTo('slow', 1);
    }, function() {
        $('img', this).stop().fadeTo('slow', 0.5);
    });

});

デモ： http： //jsfiddle.net/cG8c9/2/

于 2012-04-16T17:30:12.670 に答える
0

ホバーのフェードの順序を変更し、アンカー要素ではなく画像をターゲットにすることをお勧めします。この変更を行います：

$('a').hover(
    function() {
        $('img',this).fadeTo('slow', 0.5);
    }, 
    function() {
        $('img',this).fadeTo('slow', 1);
});

jsFiddleの例。

于 2012-04-16T17:33:36.277 に答える