Javascript 尝试使用Jquery悬停更改字体大小

我正在尝试使用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

元素不允许在

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>

如果您真的只是为了好玩而对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是默认使用的，除非设置了另一个单元。

为什么不直接使用CSS？这比使用jQuery要快得多。是的，CSS很酷。此外，我通常使用

mouseenter

和

mouseleave

。但是使用CSS@NoahHuppert

mouseexit

。。。你是说

mouseleave

。它对我很好用@RokoC.Buljan，抓得好。

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

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