Javascript Jquery中悬停函数中的If语句

请看看这个

这就是在悬停函数中放置if语句的方式吗

$( ".nn" ).hover(
  function() {
   if($(this).find('p').height() > $(this).height())
   {
    $( this ).css( "height","auto" ).removeClass("oh");
   }
  }, function() {

    $( this ).css( "height","6em" ).addClass("oh");

  }
);

由于if语句仅用于第一个函数（mouseover），该函数是否仍在mouseout函数上触发？是否可以将if语句环绕整个悬停函数，如下所示：

    $( ".nn" ).hover(

    function() {
    if($(this).find('p').height() > $(this).height())
    {
       $( this ).css( "height","auto" ).removeClass("oh");

      }, function() {

        $( this ).css( "height","6em" ).addClass("oh");

      }
    }
    );

$(".nn").on('mouseenter mouseleave', function(e) {
    if ($(this).find('p').height() > $(this).height()) {
        if (e.type == 'mouseenter') {
            $(this).css("height", "auto").removeClass("oh");
        }
        else {
            $(this).css("height", "6em").addClass("oh");
        }
    }
});

HTML 很长的文本

<div class="nn oh"><p>short text</p></div>

短文本

回答您的问题

1。

该功能是否仍在mouseout功能上触发？

是的，因为你绑定了mouseleave事件，它仍然会触发

2.

是否可以将if语句环绕整个悬停函数？

否，可以使用相同的

if

块包装两个单独的回调函数。但是，您可以采取另一种方法，手动绑定

mouseenter

和

mouseleave

（因为

hover

只是这两个事件的一种糖分）。它看起来是这样的：

    $( ".nn" ).hover(

    function() {
    if($(this).find('p').height() > $(this).height())
    {
       $( this ).css( "height","auto" ).removeClass("oh");

      }, function() {

        $( this ).css( "height","6em" ).addClass("oh");

      }
    }
    );

$(".nn").on('mouseenter mouseleave', function(e) {
    if ($(this).find('p').height() > $(this).height()) {
        if (e.type == 'mouseenter') {
            $(this).css("height", "auto").removeClass("oh");
        }
        else {
            $(this).css("height", "6em").addClass("oh");
        }
    }
});

但是你会意识到这不是你需要的，因为在这种情况下你永远不会进入

else

分支，因为条件：

$(this).find('p').height() > $(this).height()

在

mouseenter

事件后将为false

---

最后。也许这里的最佳方法是只使用简单的CSS，而不使用任何javascript

要限制初始块高度，请使用

最大高度：6em

。然后，

.nn:hover

规则将使用

最大高度：inherit处理扩展；高度：自动


.nn{
边框底部：0.8em实心#B1B3BE；
字体大小：25px；
最大高度：6em；
利润率：6%0；
背景：#eee；
填充：3%；
边框底部：0.3em实心#6F87B3；
宽度：40%；
显示：块；
溢出：隐藏；
}
.nn:悬停{
最大高度：继承；
高度：自动；
溢出：自动；
}

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddddddddddd

Hover接受mouseenter和mouseleave的in/out处理程序，所以只使用一个处理程序并检查其中的事件类型。无法在平板电脑上发布代码，对不起，您试图实现什么？@RedGiant:if语句在第一段代码中运行良好？感谢您的评论，Alex和Wolff@Jean-Paul是的，if语句工作正常。第二个div块对hover没有任何影响。