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

Question

I have the following css3 transition with ease effect:

HTML

     
    

        

                      

              相关标签:
       
      

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: