CSS: the hover effect does not work when I set the identifier to a paragraph

Question

I have the following css3 transition with ease:

HTML

<div class="button"> <a href="#" onMouseOver="clicksound.playclip()"></a> <p id="myId" class="top"></p> </div> 

CSS

  * { padding: 0; margin: 0; } .button { width: 180px; margin-top: 45px; } .button a { display: block; height: 40px; width: 180px; /*TYPE*/ color: black; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; } .button a { background:url(http://imageshack.com/a/img819/761/dqj.gif); margin: -50 0 0 0; z-index: -1; } p#myId { background: url(http://imageshack.com/a/img854/1921/9ft3.png); display: block; height: 40px; width: 167px; margin: -40px 0 0 5px; z-index:-1; /*TYPE*/ text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; color: #fff; /*POSITION*/ position: absolute; /*TRANSITION*/ -webkit-transition: margin 0.1s ease; -moz-transition: margin 0.1s ease; -o-transition: margin 0.1s ease; -ms-transition: margin 0.1s ease; transition: margin 0.1s ease; } .button:hover .top { margin: -67px 0 0 5px; line-height: 35px; } /*ACTIVE*/ .button:active .top { margin: -70px 0 0 5px; } 

If I change the p#myId to p in CSS, it works (the button goes up on hover), otherwise it won't.

Running demo on jsFiddle

Answer 1

The problem is that the :hover behavior selector has a lower specification than the default behavior rule ( p#id selector).

Change this

 .button:hover .top { 

to that

 .button:hover #myId.top { 

will solve the problem: Execution example

You can also apply the identifier to the parent (let 'say <div id="container"> ) and then use

 #container .button:hover .top { 

---

Required Reading : CSS Specific Features

Examples: