hover()方法

当鼠标指针悬停在所选元素上时,hover() 方法指定要运行的两个函数。
它绑定了 mouseenter 和 mouseleave 事件的处理程序。
如果只定义了一个函数,它将为 mouseenter 和 mouseleave 事件运行。

如何使用 jQuery 选择和操作 CSS 伪元素

要选择和操作 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