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

标签 javascript jquery html css hover

我正在尝试使用 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() 方法会监听 mouseentermouseleave,因此您再次将 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/

相关文章:

javascript - 模式匹配 webkitRelative 中的第一个子目录

javascript - <option> 元素没有 append 在他的 <select> parent 中,而是在下面

html - 悬停时如何使我的子边框与父边框重叠?

jquery .each() 向 div 添加单独的属性

html - 圆形图像周围的圆形文本

javascript - typeahead js不显示结果

javascript - 正则表达式替换所有上标数字

javascript - 清除 $destroy 上的指令作用域变量

javascript - 将值从 jquery slider 传递到 Django views.py

jquery - 无法使 Tablesorter 复选框过滤工作