我正在制作一个CSS按钮,我现在正在关注一个问题。
我在CSS中有以下内容:
.proceed {
width: 135px;
height: 38px;
position: relative;
cursor: pointer;
}
.proceedText {
position: relative;
margin: 0 auto;
max-width: 106px;
height: 29px;
padding-top: 10px;
opacity: 1;
transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
}
#proceedButton {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.6);
}
#proceedLight {
background: rgba(255, 255, 255, 0.06);
width: 100%;
height: 20px;
position: absolute;
}
关注HTML:
<div class="proceed">
<a onClick="startGateway('137340');">
<div id="proceedButton">
<div id="proceedLight"></div>
<h1 class="proceedText">Click to Proceed</h1>
</div>
</a>
</div>
当我遇到问题时,我想做什么......
我想制作一些悬停效果,但是在悬停时使每个元素都没有给我我想要的效果,因为只有当我的光标位于“元素”上时它才会悬停。
我想在.proceed上悬停以影响所有其他元素。因此,当光标结束时,“.proceed”就会跟随它。
.proceedText:hover {
opacity: 0.5;
}
#proceedLight:hover {
bottom: 0;
}
任何解决方案?导致每个元素悬停,并没有真正按我的意愿工作。
答案 0 :(得分:1)
需要将鼠标悬停在.proceed上,我认为这样可行。 如果没有尝试使用jquery来改变dom和效果。
.proceed:hover .proceedText {opacity: 0.5;}
.proceed:hover #proceedLight{bottom: 0;}
修订。 我认为jquery,就像上面的评论一样,是最好的解决方案。