我正在尝试使用 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,除非设置了另一个单位。
关于javascript - 尝试使用 Jquery 悬停更改字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25354421/