1

サムネイルの上にタイトルを表示したり非表示にしたりしようとしています。これは私のタイトルスパンです：

<span class="thumbtitle"><?php the_title(); ?></span>

これは<li>、「thumb」のクラスを持つタグ内にあります。

私が使用しているjQueryは次のとおりです。

<script type='text/javascript'>
$(document).ready(function() {
  //settings
  var opacity = 0, toOpacity = 1, duration = 0;
  //set opacity ASAP and events
  $('.thumbtitle').css('opacity',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );
});
</script>

これで完全に機能しますが、タイトルにカーソルを合わせると機能します...タイトルが配置されている場所ではなく、サムネイルにカーソルを合わせるとトリガーされるようにします。これにより、マウスがサムネイル（その上の任意の場所）にカーソルを合わせると、 ）タイトルが表示されます。

誰かが私がこれをするのを手伝ってもらえますか？また、アニメーション効果を与えることはできますか..ただちに現れたり消えたりするのではなく、徐々に現れたり消えたりしますか？

ミロ

4

3 に答える 3

2

これが更新されたものです：-

<script type='text/javascript'>
   $(document).ready(function() {
   //settings
   var opacity = 0, toOpacity = 1, duration = 0;
   //set opacity ASAP and events
   $('li.thumb').hover(function() {
      $(this).children('.thumbtitle').fadeTo(duration,toOpacity);
    }, function() {
      $(this).children('.thumbtitle').fadeTo(duration,opacity);
    }
  );
});
</script>
于 2012-06-22T11:43:43.657 に答える
0

あなたの質問のタイトルによると、私はあなたのhtmlがこのように見えると思いました

This is the thumbnail:
<div class="thumbnail">
    <li class="thumb">
        <span class="thumbtitle">Title<span>
    </li>
</div>

これをチェックしてください：

デモ

$(document).ready(function() {

    // Start with no title visible.
    $('.thumb').hide();

    //settings
    var opacity = 0, toOpacity = 1, duration = 0;
    //set opacity ASAP and events

    $('.thumbnail').hover(function() {
        $(this).children('.thumb').fadeTo(duration , toOpacity );
    }, function() {
        $(this).children('.thumb').fadeTo(duration , opacity );
    });
});
于 2012-06-22T12:14:42.713 に答える
0

ページの読み込み時に表示したくない場合は、初期不透明度を0に設定し、カーソルを合わせたときに1に設定します...

于 2012-06-22T12:03:39.233 に答える