尝试使用Jquery悬停来改变字体大小

Trying to use Jquery hover to change font size

本文关键字：改变 字体 悬停 Jquery      更新时间：2023-09-26

我尝试使用Jquery悬停功能来改变一些选项卡的字体大小。我想我在定位标签时遇到了麻烦。

这是我试图瞄准的HTML:

<ul class="tabs" data-tab>
    <div class="tab">
        <li class="tab-title">
            <a href="#panel2-1">ABOUT ME</a>
        </li>
        <li class="tab-title">
            <a href="#panel2-2">PORTFOLIO</a>
        </li> 
    </div>
</ul>

我只是试着在一个div标签中包装两个标签，并为这个div标签分配了一个名为"tab"的标签

这是我的Jquery代码: 
$(document).ready(function() {
    $('.tab').hover(function() {
        $(this).css('font-size','60px')
    });
});
谁能告诉我我做错了什么?谢谢!

DIV元素不允许在UL中，所以这是你的第一个错误，它应该是:

<ul class="tabs" data-tab>
  <!-- no party for DIV elements here -->
  <li class="tab-title"><a href="#panel2-1">ABOUT ME</a></li>
  <li class="tab-title"><a href="#panel2-2">PORTFOLIO</a></li> 
</ul>

.hover()将永远不会将我们的文本返回到默认状态，因为实际上.hover()方法侦听mouseenter和mouseleave，所以在mouseleave上，你再次将其设置为60px

另一方面，

CSS会这样做:

.tabs li:hover a{ /* Or use>> .tabs a:hover */
   font-size: 60px;
}

如果你真的只是对jQuery感兴趣，只是为了好玩，不如:

$('.tabs li').hover(function( e ) { // or simply '.tab-title'
   $("a", this).css('font-size', e.type=="mouseenter"? 60 : "inherit"); // or 56
});

同样使用jQuery，你不需要设置px，因为默认使用px，除非设置了另一个单位。

相关文章：