CSS :hover effect not working when I set an ID to the paragraph

Question

I have the following css3 transition with ease effect:

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 selector to p in CSS, it works (the button goes up on hover), otherwise it won't.

Running demo on jsFiddle

Butz

can you set up a jsFiddle.net ? – Skippet

Thx for the answer, but sorry, don't want to use Javascript unless the code is small (Maximum 20kb). I'll orgazine the code after I've fix this issue, thx for pointing this problem for me. So... you know what's going on here? – Butz

I've not suggested you to use Javascript. I've suggested you to prepare an online (minimal) demo in jsFiddle, a site that allows you to do that. Put HTML, CSS, JS and so on and press run. Then press Save, come back here and add the link to your question. – Skippet

Well, here it is jsfiddle.net/cjTN7 – Butz

Good you tried, but the result is not visible: it's not enough to cut and paste, you should use absolute path for the images, and ensure all the css / js needed TO SHOW THE PROBLEM are put in the page. The result will be visible in the lower right square. If your images are not on the web, use some other image taken from google with the same height width... – Skippet

Well, here it is again, fully working, jsfiddle.net/cjTN7/6 But without ID. – Butz

+1 for the effort. I've modified the demo and cleaned it up removing comments and unnecessary code. – Skippet

Answer 1

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:

Skippet

You did a heck of a clean up in the code, you're great! Sorry for the delayed answer, I was finishing testing stuff. The logo works fine now, but I have another problem. The logo goes here lucrebem.com.br, my problem is: My layout is responsive and the adsense (Top ad) is also responsive, but when you zoom in more than 200%, the ad disappear, it actually should stay right below the logo. Do I need to open a new topic? I think it's also related to css. – Butz

Prego :) You have not accepted the answer yet, so now you have two problems :D P.S: Yes, you should open a new question since it is (always on css, but) a totally different question – Skippet