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

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? — , Feb 11 '14 at 15:57
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. — Andrea Ligios, Feb 11 '14 at 15:58
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... — Andrea Ligios, Feb 12 '14 at 09:58
Well, here it is again, fully working, http://jsfiddle.net/cjTN7/6/ But without ID. — , Feb 12 '14 at 12:51
+1 for the effort. I've modified the demo and cleaned it up removing comments and unnecessary code. — Andrea Ligios, Feb 12 '14 at 13:02

score 17 · Accepted Answer · answered Feb 12 '14 at 13:12

17

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:

enter image description here

answered Feb 12 '14 at 13:12

Andrea Ligios

49,480
26
114
243

2

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 http://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. – Feb 13 '14 at 14:56
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 – Andrea Ligios Feb 13 '14 at 15:10

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

1 Answers1

Linked