I have the following css3 transition with ease effect:
我有以下css3过渡轻松:
HTML
HTML
<div class="button">
<a href="#" onMouseOver="clicksound.playclip()"></a>
<p id="myId" class="top"></p>
</div>
CSS
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.
如果我在CSS中将p#myId选择器更改为p,它就会工作(按钮会向上悬停),否则它不会工作。
上运行演示jsFiddle
1 个解决方案
#1
10
The problem is that the selector handling your :hover
behavior has a lower Specificity than the rule for the default behavior (p#id
selector).
问题是处理您的:hover行为的选择器比默认行为的规则(p#id选择器)具有更低的特异性。
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
还可以对父对象应用id(让我们' say
#container .button:hover .top {
A must-read: Specifics on CSS Specificity
一个必读的:关于CSS特性的细节
Examples:
例子:
#1
10
The problem is that the selector handling your :hover
behavior has a lower Specificity than the rule for the default behavior (p#id
selector).
问题是处理您的:hover行为的选择器比默认行为的规则(p#id选择器)具有更低的特异性。
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
还可以对父对象应用id(让我们' say
#container .button:hover .top {
A must-read: Specifics on CSS Specificity
一个必读的:关于CSS特性的细节
Examples:
例子: