代码之家  ›  专栏  ›  技术社区  ›  Seph Reed

在任何页面文本悬停时更改光标

css
  •  0
  • Seph Reed  · 技术社区  · 5 年前

    如果我这样更改网站的默认光标:

    body { cursor: move; }
    

    然后,悬停文本将不再产生文本悬停垂直线。

    body { 
      height: 20em;
      background: teal;
      cursor: move; 
    }
    This is some text.  When you hover it, your cursor will not change

    是否可以重新断言光标在文本悬停时应该改变?

    如果没有,是否可以仅在不悬停文本时使用自定义光标?


    编辑:我的代码不在任何特定的标签内。这不是一个不切实际的例子,这就是当您设置全站自定义光标时会发生的情况。

    0 回复  |  直到 5 年前
        1
  •  1
  •   Temani Afif    5 年前

    hacky 这个想法是创建一个额外的层,它不是应用光标的内容(文本)的一部分

    body::before {
      content:"";
      position:absolute;
      z-index:-1;
      top:0;
      left:0;
      right:0;
      bottom:0;
      cursor: move; 
    }
    
    body {
      position:relative;
      z-index:0;
      height: 20em;
      background: teal;
    }
    This is some text.  When you hover it, your cursor will not change
        2
  •  0
  •   connexo    5 年前

    您只能使用CSS定位元素,而不能定位文本节点。

    这回答了两个问题

    是否可以重新断言光标在文本悬停时应该改变?
    如果没有,是否可以仅在不悬停文本时使用自定义光标?

    相反,只将特定光标显式地应用于您实际需要的元素上。

        3
  •  -1
  •   Lil Devil    5 年前

    您需要将文本包装在 <p> 并为它们重新初始化光标。

    body { 
      height: 20em;
      background: teal;
      cursor: move; 
    }
    p {
      cursor: initial;
    }
    <p>This is some text in P tags.  When you hover it, your cursor will change</p>