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

Posted 2023-03-06

【中文标题】CSS：当我为段落设置 ID 时，悬停效果不起作用

【英文标题】：CSS :hover effect not working when I set an ID to the paragraph

【发布时间】：2014-03-09 10:16:44

【问题描述】：

我有以下 css3 过渡效果：

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，它可以工作（按钮在悬停时上升），否则不会。

Running demo on jsFiddle

【问题讨论】：

你能设置一个jsFiddle.net吗？

谢谢回答，但抱歉，除非代码很小（最大 20kb），否则不要使用 javascript。解决此问题后，我将整理代码，谢谢为我指出此问题。所以...你知道这里发生了什么吗？

我没有建议你使用 Javascript。我建议您在 jsFiddle 中准备一个在线（最小）演示，该站点允许您这样做。放入 HTML、CSS、JS 等，然后按运行。然后按保存，返回此处并将链接添加到您的问题。

嗯，这里是jsfiddle.net/cjTN7

你试过了，但结果不可见：剪切和粘贴是不够的，你应该为图像使用绝对路径，并确保放置所有显示问题所需的 css / js在页面中。结果将显示在右下角的方块中。如果您的图片不在网络上，请使用从 google 获取的其他具有相同高度宽度的图片...

【参考方案1】：

问题在于处理您的:hover 行为的选择器的特异性低于默认行为规则（p#id 选择器）。

改变这个

.button:hover .top 

到这里

.button:hover #myId.top 

将解决问题：Running example

您还可以将 id 应用于父对象（比如说<div id="container">），然后使用

#container .button:hover .top 

---

必读：Specifics on CSS Specificity

例子：

【讨论】：

您对代码进行了彻底的清理，您太棒了！抱歉延迟回答，我正在完成测试。徽标现在可以正常工作，但我还有另一个问题。标志在这里lucrebem.com.br，我的问题是：我的布局是响应式的，adsense（顶部广告）也是响应式的，但是当你放大超过 200% 时，广告消失了，它实际上应该停留在标志的正下方。我需要打开一个新主题吗？我认为这也与css有关。

Prego :) 你还没有接受答案，所以现在你有 两个 问题 :D PS：是的，你应该打开一个新问题，因为它是（总是在css，但是）一个完全不同的问题

接受！伟大的支持和家伙！我现在要开一个新话题。