javascript - 使用 jQuery 的目标伪类

Question

我无法访问的样式表中有以下两种样式：

a:link {
  font-size: 150%;
}

a:hover {
  font-size: 150%;
}

使用 jQuery，如何将 a:link 和 a:hover 的字体大小更改为 100%。

Answer 1

@Phil 在上面的评论中是正确的，可以直接添加规则。<style/>可以在运行时附加一个元素，该元素<head/>将触发页面重新渲染（？）并且将应用新样式！从小提琴：

$('head').append('<style type="text/css">a:hover{color:red !important;}</style>');

出于某种原因，head选择器对我来说看起来不正确，但是嘿，它有效！在 5 秒内将鼠标悬停在链接上（为了论证），它将被样式化。

Answer 2

假设您只需要 jQuery，您可以使用以下代码（只需确保在从远程文件导入上述 css 后编写此脚本）

$(document).ready(function(){
    $('a').on('hover',function(){
        $(this).css({'font-size':'100%'});
    }).css({'font-size':'100%'});    
});​

虽然您也可以通过向页面添加简单样式并附!important加到规则来做到这一点

<style type="text/css">
a:link {
  font-size: 100% !important;
}

a:hover {
  font-size: 100% !important;
}
</style>

JSFiddle 示例