Question

我有一个工具提示，可以在下面看到，目前只在悬停时显示工具提示，但我希望它显示工具提示，当悬停和点击（对于触摸屏设备）有人可以告诉我如何？

我的javascript代码

<script type="text/javascript">
$(function(){
  $("ul.thumb li").hover(function() {
  $(this)
    .css('z-index', '10')
    .find('img').addClass("hover")
    .stop()
    .animate({
       marginTop: '-150px',
       marginLeft: '-150px',
       top: '50%',
       left: '50%',
       width: '300px',
       height: '300px',
       padding: '20px'

     }, 200, function() {

        var $this = $(this),
        h = $this.height();
        $caption = $('<div class="caption">' + this.title  + '</div>')
            .css('top', h.toString() + 'px');
            $this.after($caption);

      }); 

   }, function() {

 $('.caption').remove();
 $(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({

    marginTop: '0',
    marginLeft: '0',
    top: '0',
    left: '0',
    width: '200px',
    height: '200px',
    padding: '5px'

 }, 400);
});
});
</script>

Answer 1

您可以使用jQuery .on()方法将处理程序绑定到多个事件......

首先需要命名这两个函数。然后您可以使用.on()，如下所示：

$("ul.thumb li").on('mouseover touchstart', show);
$("ul.thumb li").on('mouseleave touchend', hide);

Updated JSFiddle

Answer 2

首先，重构并重命名你的悬停进出功能：

function showTooltip(){
  $(this)
    .css('z-index', '10')
    .find('img').addClass("hover")
    .stop()
  // etc...

}

function hideTooltip(){
  $('.caption').remove();
  $(this)
    .css('z-index', '0')
    .find('img').removeClass("hover")
    .stop()
  // etc...
}

然后，而不是使用hover shorthand, use the mouseenter and mouseleave events来监听悬停：

$("ul.thumb li")
  .on('mouseenter', showTooltip)
  .on('mouseleave', hideTooltip);

如果您想要显示触摸事件的工具提示，只需向其添加touchstart事件：我想您想要点按以打开和关闭工具提示。

$("ul.thumb li")
  .on('mouseenter touchstart', showTooltip)
  .on('mouseleave touchstart', hideTooltip);

Answer 3

您可以创建一个功能，让我们称之为activate：

function activate(that) {
    //Your code here
}

然后像这样使用它：

$("ul.thumb li").hover(function() {
    activate($(this));
});

$("ul.thumb li").click(function() {
    activate($(this));
});

注意，activate将包含您在这些事件中处理所需的命令。此外，在activate中，请尝试确保您使用的是that而不是this。

如何使用javascript制作悬停功能也是一个点击功能

3 个答案: