8

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

7
  • can you set up a jsFiddle.net ? Feb 11, 2014 at 15:17
  • 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?
    – user1096494
    Feb 11, 2014 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. Feb 11, 2014 at 15:58
  • Well, here it is jsfiddle.net/cjTN7
    – user1096494
    Feb 12, 2014 at 3:38
  • 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... Feb 12, 2014 at 9:58

1 Answer 1

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

enter image description here

2
  • 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 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.
    – user1096494
    Feb 13, 2014 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 Feb 13, 2014 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy