如何添加不同的CSS3悬停转场悬停与CSS

Question

我的问题具体涉及尝试不同的CSS背景转换悬停出来，比用于悬停的转换，使用CSS。

这个问题引用可用的CSS3悬停效果在Ian Lunn GitHub CSS3 Hover effects

See codepen here，或下面图的代码。 代码：

<style> 

.hvr-shutter-in-horizontal { 
    display: inline-block; 
    vertical-align: middle; 
    background: rgba(121,61,61, 0.7); 

    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-shutter-in-horizontal:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(77,79,79, 0.7); 

    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
    -webkit-transform-origin: 50%; 
    transform-origin: 50%; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { 
    color: white; 
} 
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
} 
</style> 


<a href="#" class="hvr-shutter-in-horizontal">View our Training Workshops</a> 

我想改变鼠标出此按钮，是相同的鼠标出为下面的CSS生产：

/* Sweep To Bottom */ 
.hvr-sweep-to-bottom { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-sweep-to-bottom:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #2098d1; 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
    -webkit-transform-origin: 50% 0; 
    transform-origin: 50% 0; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { 
    color: white; 
} 
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
} 

Answer 1

这里是概念的一个样品，这在动画鼠标的高度，并基于评论它与伪元素

更新鼠标出彩

10个

div { 
 
    position: relative; 
 
    height: 30px; 
 
    background: red; 
 
    transition: background 1s; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    background: red; 
 
    transition: background 1s; 
 
} 
 

 
div:hover { 
 
    height: 120px; 
 
    background: blue; 
 
    transition: height 1s; 
 
} 
 
div:hover:after { 
 
    top: 100%; 
 
    background: yellow; 
 
    transition: top 1s; 
 
}

<div></div>