gpt4 book ai didi

html - CSS :hover effect not working when I set an ID to the paragraph

转载 作者:太空狗 更新时间:2023-10-29 14:44:55 25 4
gpt4 key购买 nike

我有以下具有轻松效果的 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

最佳答案

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

改变这个

.button:hover .top {

对此

.button:hover #myId.top {

将解决问题: Running example

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

#container .button:hover .top {

必读:Specifics on CSS Specificity

例子:

enter image description here

enter image description here

关于html - CSS :hover effect not working when I set an ID to the paragraph,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21705058/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com