Question

我已经尝试到处寻找修复方法，但找不到任何关于为什么这不起作用的线索。它适用于不在另一个 div/container/wrapper 中的所有内容。

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://kit.fontawesome.com/1b75432c09.js" crossorigin="anonymous"></script>
    <script src="script.js"></script>
    <title>Document</title>
</head>
<body>
<body>

    <div>
      <p>Some text i want the cursor to expand on</p>
    </div>

    <div class="cursor"></div>
    <div class="cursor1"></div>

    var cursor = document.querySelector(".cursor");
    var cursor1 = document.querySelector(".cursor1");
    document.addEventListener("mousemove", function(e) {
        cursor.style.cssText = cursor1.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px";
    });
</body>
</html>

    .cursor {
      position: fixed;
      width: 50px;
      height: 50px;
      border: 1px solid rgb(255, 208, 106);
      background: none;
      border-radius: 50%;
      pointer-events: none;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%);
      transition: 0.1s;
      z-index: 11;
    }

    .cursor1 {
      position: fixed;
      width: 8px;
      height: 8px;
      background-color: rgb(255, 253, 106);
      border-radius: 50%;
      pointer-events: none;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%);
      transition: 0.15s ease;
      z-index: 10;
    }

    div p:hover ~ .cursor {
      transform: translate(-50%, -50%) scale(1.25);
      background-color: white;
      opacity: 0.5;
    }

    div p:hover ~ .cursor1 {
      opacity: 0;
    }

它只适用于像 div、footer、header 这样的父级，但是一旦我变得更加明确，例如 footer p 它就什么都不做

Answer 1

说明

在 A ~ B 中，~ 是一个通用兄弟选择器，它选择与 B 同级的所有 A 元素。请注意，这两个元素必须具有相同的父元素。

就像你的情况： div p:hover ~ .cursor 此处 ~ 一般同级选择器仅在 p 和 .cursor 元素具有相同的父元素 div

时才有效

悬停子元素时自定义光标不会变大

1 个答案:

说明