影响影响所有在css按钮
问题描述:
林不知道为什么会发生这种情况。如果我悬停一个按钮,所有按钮都会应用这种效果,而不是。我只想将效果应用于我悬停的按钮上。影响影响所有在css按钮
.buttons{
font-family: arial;
text-decoration: none;
padding: 10px 15px;
background: #000;
color: #fff;
border-radius: 3px;
}
.buttons:after{
\t content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.buttons:hover:after{
\t width: 120%;
\t background-color: rgba(255,255,255,0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
<br><br>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
答
你width: 120%;
在:hover
是测量相对于文档(它是伪元素的offsetParent),而不是按钮。
添加position: relative;
的按钮,使该偏移家长代替:
.buttons{
position: relative;
font-family: arial;
text-decoration: none;
padding: 10px 15px;
background: #000;
color: #fff;
border-radius: 3px;
}
.buttons:after{
\t content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.buttons:hover:after{
\t width: 120%;
\t background-color: rgba(255,255,255,0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
<br><br>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
答
你错过下面的属性,
更新CSS:
.buttons{
position:relative;/* Add this property */
}
.buttons{
font-family: arial;
text-decoration: none;
padding: 10px 15px;
background: #000;
color: #fff;
border-radius: 3px;
position:relative;
}
.buttons:after{
\t content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
overflow:hidden;
}
.buttons:hover:after{
\t width: 120%;
\t background-color: rgba(255,255,255,0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
你尝试直接添加效果,悬停按钮标签(不适用于:元素之后)? – user14511
yes ............... – Jonjie
你可以在'.buttons :: after'选择器上放置'transition:0.3s全部放松'规则(不在':hover '),并删除'transition:none'。该属性设置过渡效果,所以动画仍然只会在悬停时发生。我认为这不会解决你的问题,但它会减少你的代码。 – chharvey