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

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>

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

Background Image Mouse Over, Start Button Effect

html

css

hover

onmouseover