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
