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 回答