Transition examples

HTML

<div id="birthday">Surprise Party</div>
<p></p>
<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>

<script>
function blue()
{
    element=document.getElementById("birthday");
    
    element.innerHTML="Happy";
    
    $('#birthday').removeClass('red');
    $('#birthday').addClass('blue');
}

function red()
{
    element=document.getElementById("birthday");
    
    element.innerHTML="Birthday";
    
    $('#birthday').removeClass('blue');
    $('#birthday').addClass('red');
}
</script>

<!-- question:
     Why does clicking a button disable div:hover? -->

CSS

#birthday
{
    width: 100px;
    height: 50px;
    background: blue;
    transition: width 2s,opacity 2s,background 15s;
}

#birthday.blue {
    background: blue;
    width: 150px;
    opacity: 1.0;
    transition: width 2s,background 15s,opacity 2s;
}

#birthday.red {    
    background: red;
    width: 300px;
    opacity: 0.0;
    transition: width 2s,background 4s,opacity 6s;
}

#birthday:hover,
#birthday.blue:hover,
#birthday.red:hover
{
    width: 200px;
    background: green;
    opacity: 0.2;
    transition-timing-function: linear;
    transition: width 2s,background 4s,opacity 6s;
}