该效果会影响css中的所有按钮

Question

我想知道为什么会这样。如果我将鼠标悬停在按钮上，则所有按钮都会应用不应该效果的效果。我想仅将效果应用于我悬停的按钮。

＆＃13;

＆＃13;

.buttons{
  font-family: arial;
  text-decoration: none;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 3px;
}


.buttons:after{
	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{
	width: 120%;
	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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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{
	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{
	width: 120%;
	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>

Answer 2

你错过了以下的财产，

更新css：

.buttons{
  position:relative;/* Add this property */
}

＆＃13;

＆＃13;

.buttons{
  font-family: arial;
  text-decoration: none;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 3px;
  position:relative;
}


.buttons:after{
	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{
	width: 120%;
	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;
}

＆＃13;

<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>
<a href="#" class="buttons">Submit</a>

＆＃13;

＆＃13;

＆＃13;