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

Question

我试图使用Jquery悬停功能来更改某些选项卡的字体大小。 我认为我在定位标签时遇到了麻烦。

这是HTML im试图定位的目标：

<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标签分配了一个称为“标签”的标签

这是我的Jquery代码：

$(document).ready(function() {
    $('.tab').hover(function() {
        $(this).css('font-size','60px')
    });
});

有人可以告诉我我做错了什么吗？ 谢谢！

Answer 1

UL内不允许使用DIV元素，所以这是您的第一个错误，应为：

<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 ，等鼠标离开你它正在重新设置为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 。