CSS：当我为段落设置ID时，hover效果不工作 [英] CSS :hover effect not working when I set an ID to the paragraph

问题描述

我有以下css3转换以轻松的效果：

HTML

 < div class =button> 
< a href =＃onMouseOver =clicksound.playclip（）>< / a> 
< p id =myIdclass =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; 
} 
  

如果我更改 p＃myId selector to p 在CSS中，它的工作原理（按钮上升悬停），否则不会。

在jsFiddle上运行演示

$ b问题是，处理你的：hover 行为的选择器具有低于 （ p＃id 选择器）的规则。

更改此

  .button：hover .top {
  

到此

  .button：hover＃myId.top { 
  

会解决问题： 运行示例

您还可以将ID应用于父对象< div id =container> ），然后使用

  #container .button：hover .top {
  

---

必读：关于CSS特异性的详细信息

示例：

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

解决方案

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:

这篇关于CSS：当我为段落设置ID时，hover效果不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！