How do I make my text disappear when I hover over my div? - css

Question

This is the only thing in the body of the HTML:
<div id="box">
<p id="text"> Enter The Disco! </p>
</div>
and this is my CSS relating to the problem:
#box:hover{
-webkit-transform:rotate(360deg);
opacity:1;
background-image:url("Logo.jpg");
width:428px;
height:208px;
font-size:38px;
}
#text:hover{
padding:18% 0% 0% 0%;
color:red;
}
And what I want to do is make the text inside the div disappear when I hover over it how do I do this? It already spins and changes background but i just want the text to disappear after it has finished its animation.

Answer 1

You could use the color CSS attribute and instead of making it invisible, just make it transparent, which should have the same effect:
#text:hover {
/* other rules */
color: transparent;
}

Answer 2

you can use different way too. It is easy too like another solutions:
#text:hover {
display:none;
}

Answer 3

It's no problem to let it disappear: use display:none, opacity:0, visibility:hidden or color:transparent; but hiding it AFTER the animation? This seems to be a bit more difficult. I don't think that this is possible without javascript:
<div id="box" onmouseover="spin();">
<p id="text"> Enter The Disco! </p>
</div>
<script type="text/javascript">
var i; var rotate;
function spin() {
i = 180; rotate = setInterval("spinInterval()",3);
}
function spinInterval() {
document.getElementById('box').style.WebkitTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.MozTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.OTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.Transform = "rotate("+ i +"deg)";
i++;
if(i>360) {
document.getElementById("text").style.opacity = 0;
clearInterval(rotate);
}
}
</script>
PS: this works for all browsers, not only on Chrome :)