處理鼠標移開CSS效果

Question

.box { 
    position: relative; 
    background-color: #fe0000; 
    height: 250px; 
    width: 250px; 
    border-radius: 3px; 
    overflow: hidden; 
    -moz-border-radius-bottomright: 138.88889px; 
    -webkit-border-bottom-right-radius: 138.88889px; 
    border-bottom-right-radius: 138.88889px; 
    -moz-border-radius-bottomleft: 138.88889px; 
    -webkit-border-bottom-left-radius: 138.88889px; 
    border-bottom-left-radius: 138.88889px; 
} 
.box .shine { 
    position: absolute; 
    top: -200%; 
    left: -200%; 
    width: 500px; 
    height: 500px; 
    opacity: 0; 
    background: rgba(255, 255, 255, 0.2); 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(90%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))); 
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, 6 rgba(255, 255, 255, 0) 100%); 
    background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
    transform: rotate(30deg); 
    transition-property: left, top, opacity; 
    transition-duration: 0.5s, 0.5s, 0.1s; 
    transition-timing-function: ease-in-out; 
} 
.box:hover .shine { 
    opacity: 1; 
    top: -50%; 
    left: -50%; 
} 

http://jsfiddle.net/iaezzy/0ad7pthm/

的光澤效果看起來不錯，但如果你從元素鼠標移開，有一個奇怪的故障。我如何控制鼠標行爲？

Answer 1

你無法控制通過CSS mouseout屬性，但可以通過刪除opacity從transition-property去除毛刺：

transition-property: left, top; 

body { 
 
    background: #444; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    background-color: #fe0000; 
 
    height: 250px; 
 
    width: 250px; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    -moz-border-radius-bottomright: 138.88889px; 
 
    -webkit-border-bottom-right-radius: 138.88889px; 
 
    border-bottom-right-radius: 138.88889px; 
 
    -moz-border-radius-bottomleft: 138.88889px; 
 
    -webkit-border-bottom-left-radius: 138.88889px; 
 
    border-bottom-left-radius: 138.88889px; 
 
} 
 
.box .shine { 
 
    position: absolute; 
 
    top: -200%; 
 
    left: -200%; 
 
    width: 500px; 
 
    height: 500px; 
 
    opacity: 0; 
 
    background: rgba(255, 255, 255, 0.2); 
 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(90%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))); 
 
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
 
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, 6 rgba(255, 255, 255, 0) 100%); 
 
    background: linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%); 
 
    transform: rotate(30deg); 
 
    transition-property: left, top; 
 
    transition-duration: 0.5s, 0.5s, 0.1s; 
 
    transition-timing-function: ease-in-out; 
 
} 
 
.box:hover .shine { 
 
    opacity: 1; 
 
    top: -50%; 
 
    left: -50%; 
 
}

<div class="box"> 
 
    <div class="shine"></div> 
 
</div>