CSS:当我为段落设置 ID 时,悬停效果不起作用

CSS :hover effect not working when I set an ID to the paragraph(CSS:当我为段落设置 ID 时,悬停效果不起作用)
本文介绍了CSS:当我为段落设置 ID 时,悬停效果不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有以下 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 特定性规范

例子:

这篇关于CSS:当我为段落设置 ID 时,悬停效果不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Authorization header in img src link(img src 链接中的授权标头)
:hover:before text-decoration none has no effects?(:hover:before text-decoration none 没有效果?)
Is CSS faster when you are specific?(当您特定时,CSS 会更快吗?)
CSS sibling selectors (select all siblings)(CSS 兄弟选择器(选择所有兄弟))
IE: nth-child() using odd/even isn#39;t working(IE:使用奇数/偶数的 nth-child() 不起作用)
How can I tell if an element is in a shadow DOM?(如何判断一个元素是否在影子 DOM 中?)