Question

我正在尝试让标题显示并在缩略图上消失。这是我的标题范围：

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

这是一个<li>标签，里面有一个“拇指”类。

我使用的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>

现在这种方法很完美，但是当我将鼠标悬停在标题上时它会起作用...当我将鼠标悬停在缩略图上而不是标题所在的位置时，我希望它触发，以便当鼠标移过缩略图时（在它的任何地方）标题出现。

有人可以帮我这么做吗？另外，我可以给它一个动画效果..它会逐渐出现并消失，而不是立即出现并消失吗？

米罗

Answer 1

这是更新的： -

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

Answer 2

如果您不希望它在页面加载时显示，请将初始不透明度设置为0，并将其悬停在...上时将其设置为1

Answer 3

根据你问题的标题，我认为你的HTML看起来像这样

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

检查出来：

DEMO

$(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 );
    });
});

当鼠标悬停在div </span>上时，<span>上的jQuery mouseover mouseout事件

3 个答案: