Using css/js, hide <h2> in a div when hovered over

Question

What I've tried (css):

div:hover #h2 {
  color: transparent; 
}

I want to hide text in a div like this:

<div>
  <h2>text</h2>
</div>

Answer 1

You should remove the # :

div:hover h2 {
    color: transparent; 
}

A # indicates an id instead of a tag name (so you were selecting id="h2" ).

Answer 2

this will hide H2 tag on DIV hover

div:hover h2{
    display: none; 
}

if you need fix height in your DIV you can use this one:

div:hover h2{
    visibility: hidden; 
}

UPDATE: duo to questioner comment, if you want to use a specific id, do like this:

<div id="spdiv"><h2>message</h2></div>

and in css

#spdiv:hover h2{
    display: none; 
}

using # helps you to specify element id