The problem is that the selector handling your :hover
behavior has a lower Specificity than the rule for the default behavior (p#id
selector).
Changing this
.button:hover .top {
to this
.button:hover #myId.top {
will solve the problem: Running example
You can also apply an id to a parent object (lets' say <div id="container">
), and then use
#container .button:hover .top {
A must-read: Specifics on CSS Specificity
Examples: