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

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>

Answer 2

是的，有可能吗

你应该使用这个简单的技巧

.bgAdbanner:hover a.right-efect:before{ 
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

希望这个帮助

让我知道进一步的澄清。

.right-efect {
display: block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
-moz-transform: perspective(1px) translateZ(0);
-ms-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;
-moz-transition-duration: 0.3s;
-ms-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;
-ms-transition: all 0.1s;
transition: all 0.1s; 
-webkit-box-shadow: 0px 6px 0px #d35400;
-moz-box-shadow: 0px 6px 0px #d35400;
-ms-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);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);      
}
.right-efect:active {
-webkit-box-shadow: 0px 2px 0px #d35400;
-ms-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 a.right-efect:before{ 
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

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