hover()方法
当鼠标指针悬停在所选元素上时,hover() 方法指定要运行的两个函数。
它绑定了 mouseenter 和 mouseleave 事件的处理程序。
如果只定义了一个函数,它将为 mouseenter 和 mouseleave 事件运行。
要选择和操作 CSS 伪元素,例如 ::before 和 ::after,我们可以使用 hover() 方法以防止“其他文本”出现。
首先,将内容传递给带有数据属性的伪元素,然后使用jQuery对其进行操作:
在 jQuery 中:
$('span').hover(function () { $(this).addClass('change').attr('data-content', 'come'); });
在 CSS 中:
span: after { content: attr(data - content) 'other text'; }
下面是一个例子:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <style> span.change:after { content: attr(data-content) ' to onitroad!'; } </style> </head> <body> <p>Hover over Wel</p> <span>Wel</span> <script> $(document).ready(function() { $('span').hover(function() { $(this).addClass('change').attr('data-content', 'come'); }); }); </script> </body> </html>
attr() 函数
attr() CSS 函数可以与任何 CSS 属性一起使用,但对内容以外的属性的支持是实验性的。
attr() 函数用于获取所选元素的属性值并在样式表中使用它。
它也可以用于伪元素并返回伪元素的原始元素上的属性值。
日期:2020-06-02 22:16:26 来源:oir作者:oir