CODEWITHSUNDEEP
javascripthtmlcss
Erwin KIRICHNER
Erwin KIRICHNER

Reputation: 47

Custom cursor not growing in size when hovering child elements

I've tried looking for a fix everywhere but couldn't find a single clue on why this isn't working. It works over everything that isn't inside another div/container/wrapper.

This is my HTML code:

<!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;
    }

It only works on parents like div, footer, header, but as soon as I become more explicit, for example footer p it just doesn't do anything

Upvotes: 0

Views: 63

Answers (1)

Shashikant Yadav - Kantbtrue
Shashikant Yadav - Kantbtrue

Reputation: 828

Explanation

In A ~ B, ~ is a general sibling selector which selects all the B elements that are sibling to A. Note both the elements must have the same parent.

Like in your condition: div p:hover ~ .cursor here ~ general sibling selector only works when both p and .cursor elements have same parent div

Upvotes: 1

Related Questions