html - 背景图像鼠标悬停，开始按钮效果

Question

这里的代码请帮助我。背景图像鼠标悬停开始按钮效果。我可以用 css3 或纯 javascript 来做到这一点吗？

.right-efect {
  display: block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;  
  position:relative;
  top:81%;
  width: 120px;
  color:#FFFFFF;
  text-decoration:none;
  border-radius:5px;
  background-color:#e67e22;
  text-align:center;
  padding:5px 5px;
  margin: 0px auto;  
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;	
  -webkit-box-shadow: 0px 6px 0px #d35400;
  -moz-box-shadow: 0px 6px 0px #d35400;
  box-shadow: 0px 6px 0px #d35400;
  font-family:Helvetica, Arial, sans-serif;
  font-weight:500;
}

.right-efect:before  {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B23436;
  border-radius:5px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  
  
}
.right-efect:hover, .right-efect:focus, .right-efect:active {
  color: #FFFFFF;
  
}
.right-efect:hover:before, .right-efect:focus:before, .right-efect:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  
}
.right-efect:active {
	-webkit-box-shadow: 0px 2px 0px #d35400;
    -moz-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    position:relative;
	
}

.bgAdbanner {
	background-image:url(https://picsum.photos/300/250);
	width:300px;
	height:250px;
	background-repeat:no-repeat;
	background-position:center;
	position:relative; cursor:pointer;
}

<div class="bgAdbanner">
<a href="#" class="right-efect">Download &#8623;</a>
</div>

Answer 1

您可以使用 > CSS 选择器。

.bgAdbanner > .right-efect 像这样。

引用:https://www.w3schools.com/cssref/css_selectors.asp

.right-efect {
  display: block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;  
  position:relative;
  top:81%;
  width: 120px;
  color:#FFFFFF;
  text-decoration:none;
  border-radius:5px;
  background-color:#e67e22;
  text-align:center;
  padding:5px 5px;
  margin: 0px auto;  
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;	
  -webkit-box-shadow: 0px 6px 0px #d35400;
  -moz-box-shadow: 0px 6px 0px #d35400;
  box-shadow: 0px 6px 0px #d35400;
  font-family:Helvetica, Arial, sans-serif;
  font-weight:500;
}

.right-efect:before  {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B23436;
  border-radius:5px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  
  
}
.right-efect:hover, .right-efect:focus, .right-efect:active {
  color: #FFFFFF;
  
}
.right-efect:hover:before, .right-efect:focus:before, .right-efect:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  
}
.right-efect:active {
	-webkit-box-shadow: 0px 2px 0px #d35400;
    -moz-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    position:relative;
	
}

.bgAdbanner {
	background-image:url(https://picsum.photos/300/250);
	width:300px;
	height:250px;
	background-repeat:no-repeat;
	background-position:center;
	position:relative; cursor:pointer;
}
.bgAdbanner:hover > .right-efect{
   color: #FFFFFF;
}
.bgAdbanner:hover > .right-efect:before{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  
}

<div class="bgAdbanner">
<a href="#" class="right-efect">Download &#8623;</a>
</div>