CODEWITHSUNDEEP
htmlcsscss-selectorsevent-handlinghover
fernando
fernando

Reputation: 99

Hover doesn't work on CSS, even in simple test code

I can't get the hover function to work even in a simple test code. Its driving me crazy. this code just try to change the background code of a

when hovering over a button. what am I missing?

<!doctype html>

<button id="dropdownmenu"></button>
<p id="test"> this is a test <p>

<style>
#test{
  background-color: red;
}
#dropdownmenu{
  height:200px;
  width:200px;
}
#dropdownmenu: hover #test{
  background-color: blue;
}
</style>

</html>

Upvotes: 0

Views: 852

Answers (3)

Bảo Linh
Bảo Linh

Reputation: 1

You have two cards, it's not related. If you want to change background color of <p> you can use JavaScript for do this.

<button onmouseover="changeColor()"  id="dropdownmenu">hover</button>
<p id="test"> this is a test <p>
<script>    

function changeColor() {
    let text = document.getElementById("test");
    text.style.backgroundColor = "pink";
}
</script>

<style>
#test{
  background-color: red;
}
#dropdownmenu{
  height:200px;
  width:200px;
}
</style>

</html>

Upvotes: 0

Flavio RT
Flavio RT

Reputation: 66

There are 2 possible answers for your question:

  1. I'm not 100% sure if the <p> is supposed to be inside or outside the <button>... one of the answers would be to move the <p> inside the button, like:
<button id="dropdownmenu">
    <p id="test"> this is a test <p>
</button>
  1. Now, if you want to to have the <p> outside the <button> you could simply add a + after the hover, like:
#dropdownmenu:hover + #test{
    background-color: blue;
}

Upvotes: 1

Marcilio Leite
Marcilio Leite

Reputation: 1277

Remove the whitespace between the : and hover. Hover is a pseudoselector and you should obbey the syntax

Upvotes: 2

Related Questions