1. 犀牛前端部落首页
  2. jQuery百科

jQuery操作伪类选择器如:::before和::after

可以使用data属性将内容传递给伪元素,然后使用jQuery来操作

Html代码如下:

<span>foo</span>

jQuery代码如下:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

CSS设置如下:

span:after {
    content: attr(data-content);
    /* 你想显示的内容 */
}

如果你想阻止“”其他文本“”出现,你可以这样解决:

Html:

<span>foo</span>

jQuery:

$('span').hover(function(){
     $(this).addClass('change').attr('data-content','bar');
   }).mouseleave(function(){
    $(this).removeClass('change');
   })

CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

需要注意的是我们使用到了attr函数,兼容性可以查看该链接

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2611.html

发表评论

登录后才能评论