问题描述
我有以下 css3 过渡效果:
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; }
如果我在 CSS 中将 p#myId 选择器更改为 p,它可以工作(按钮在悬停时上升),否则不会.
If I change the p#myId selector to p in CSS, it works (the button goes up on hover), otherwise it won't.
在 jsFiddle 上运行演示
推荐答案
问题是处理你的 :hover 行为的选择器有一个较低的Specificity 比默认行为的规则(p#id 选择器).
The problem is that the selector handling your :hover behavior has a lower Specificity than the rule for the default behavior (p#id selector).
改变这个
.button:hover .top {
到这里
.button:hover #myId.top {
将解决问题:运行示例
will solve the problem: Running example
您还可以将 id 应用于父对象(比如说 <div id="container">),然后使用
You can also apply an id to a parent object (lets' say <div id="container">), and then use
#container .button:hover .top {
<小时>
必读:CSS 特定性规范
例子: