影响影响所有在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>

来源

2017-06-05 Jonjie

你尝试直接添加效果，悬停按钮标签（不适用于：元素之后）？ – user14511

yes ............... – Jonjie

你可以在'.buttons :: after'选择器上放置'transition：0.3s全部放松'规则（不在'：hover '），并删除'transition：none'。该属性设置过渡效果，所以动画仍然只会在悬停时发生。我认为这不会解决你的问题，但它会减少你的代码。 – chharvey

你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>

来源

2017-06-05 03:20:08 SLaks

你错过下面的属性，

更新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>

来源

2017-06-05 03:23:56 LKG

影响影响所有在css按钮

回答

相关问题