CODEWITHSUNDEEP
htmlcsscss-selectors
S.M Naveen
S.M Naveen

Reputation: 190

Background color not changing when it's hovered CSS

Hi guys I am creating a custom mouse-like thing, I want its colour to be white when it hovers links IDK what's wrong with my code, it's not working properly when select parent element it works fine but when I use child element it's not working help me out, I got stuck with this code for like 4 hours I need help

Here's my code

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )
*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  ul li a:hover ~ .cursor {
 background-color: white;
  }
<div class="nav">
        <ul>
            <li><a href="#">Hello</a></li>
           </ul>
    </div>



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

I just pasted whatever code I coded, I don't know what the problem is.

Upvotes: 3

Views: 217

Answers (3)

S.M Naveen
S.M Naveen

Reputation: 190

I found a solution for this, We can use Javascript instead of relying on CSS for this

HTML

<a onmouseenter="onHover()"  onmouseleave="notHover()" href="#">Text<a>

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

JS part

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');

document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )


function onHover(){
  cursor.style.backgroundColor = "white";
  cursor.style.height = "70px";
  cursor.style.width = "70px";
  cursor2.style.backgroundColor = "transparent";
  console.log("hello")
}

function notHover(){
  cursor.style.backgroundColor = "transparent";
  cursor.style.height = "50px";
  cursor.style.width = "50px";
  cursor2.style.backgroundColor = "white";
}

CSS

*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  
  .nav:hover ~ .cursor {
    background-color: white;
  }

Thanks to the one who helped with this problem I found an alternative way to do this and want to share this with everyone so if anyone is stuck with this. Thank you once again to who helped me

Upvotes: 0

Iman
Iman

Reputation: 571

There are two answers to this question:

1- when you can use ~, that a and <div class="cursor"></div> in same parent.

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )
 *{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
 .nav a:hover ~ .cursor {
 background-color: white;
  }
<div class="nav">
        <ul>
            <li>
            <a href="#">Hello</a>
            <div class="cursor"></div>
            <div class="cursor2"></div>
             </li>
        </ul>
</div>

2- if you could not change structure of html, you can hover on ul:

.nav:hover ~ .cursor {
  background-color: white;
}


const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )
 *{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
 .nav:hover ~ .cursor {
 background-color: white;
  }
<div class="nav">
        <ul>
            <li>
            <a href="#">Hello</a>
            </li>
        </ul>
</div>

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

Upvotes: 2

Tom
Tom

Reputation: 5677

ul li a:hover ~ .cursor

This CSS selector applies for every element having the class cursor that is preceded by an a element that is hovered.

But in the HTML you provided, the div having the cursor class is preceded by a div having the nav class.

Using CSS, the only solution I can think of is to use this selector :

.nav:hover ~ .cursor

You can add width: min-content; to all li elements to avoid the white background to spread too far.

Note that if the div.cursor is placed immediately after the div.nav in your complete HTML, you should use + instead of ~.

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )
*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  
  .nav:hover ~ .cursor {
    background-color: white;
  }
<div class="nav">
        <ul>
            <li><a href="#">Hello</a></li>
           </ul>
    </div>



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

Upvotes: 2

Related Questions