Javascript 悬停子元素时自定义光标的大小不增加_Javascript_Html_Css

Javascript 悬停子元素时自定义光标的大小不增加

javascript html css

Javascript 悬停子元素时自定义光标的大小不增加,javascript,html,css,Javascript,Html,Css,我试着到处寻找修复方法，但找不到一条线索来解释为什么这个方法不起作用。它可以覆盖不在另一个div/容器/包装器中的所有内容这是我的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <meta c

我试着到处寻找修复方法，但找不到一条线索来解释为什么这个方法不起作用。它可以覆盖不在另一个div/容器/包装器中的所有内容

这是我的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>

它只适用于div、footer、header等家长，但一旦我变得更加明确，例如footer p它就不会做任何解释在

A~B

中，

是一个通用同级选择器，用于选择与

同级的所有

元素。注意两个元素必须具有相同的父元素

就像你现在的状况：

div p:hover~。cursor

此处

常规同级选择器仅在

和

两个元素都具有相同的父元素div
发布一个非工作实现的示例如果我将css更改为div p:hover~，则某些文本
无效。cursor，但如果我做div:hover~，cursor它会的。无论出于何种原因，它只在父类上工作。它不工作，因为div p:hover~。cursor正在查找一个.cursor元素，该元素是p:hover的同级（~）。但是.cursor不是p:hover的兄弟。这是一个兄弟姐妹，你能解释一下你到底想要什么吗。是因为您只有一些非常特定的元素，希望光标在这些元素上展开，还是所有div元素或。。。如果你能展示一些你正在使用的那种结构的HTML，那会很有帮助。是的，我希望我的光标在一些特定的元素上展开。我会更新上面的HTML谢谢你的解释，我如何选择一个特定的元素？在p
标记元素的父元素div
下移动.cursor*
元素，或者使用div:hover~。cursor对于一个选择器来说效果很好，但是如果我想让我的光标在多个东西上变大怎么办？
    .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;
    }