css3過渡和javascript出錯

Question

每當我點擊「特殊鏈接」並保持我的光標在子菜單框上一切正常，但是當我將光標移動到框外時，它將按設置移動並移動位置到左上方角。我非常感謝任何有關這個問題的建議/幫助，以使其行爲穩定。

PS。我只爲Chrome設置了效果，因此沒有其他瀏覽器的可視化支持。

https://jsfiddle.net/34ho1fd9/

.option:hover 
{ 
    font-style: normal; 
    background-color: rgba(0, 0, 0, 0.3); 
    cursor: pointer; 
    box-sizing: border-box; 
    transition-property: background; 
transition-duration: .4s; 
left: 0; 
top: 0; 
-webkit-transform: skew(-25deg); 
} 

span.transition 
{ 
display: inline-block; 
} 

.option:hover span.transition 
{ 
-webkit-transform: skew(25deg); 
} 

.submenu 
{ 
background-color: inherit; 
position: fixed; 
top: 34px; 
left: 28px; 
width: 200px; 
display: none; 
margin-left: 10px; 
padding: 40px 0 5px; 
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); 
-webkit-transform: skew(25deg); 
} 

.root 
{ 
margin:0px; 
padding:0px; 
font-size: 18px; 
padding: 11px 0 0 0px; 
border-top:1px solid #dedede; 
} 

Answer 1

發生了什麼事是，.submenu也是你.option的一部分。所以，當你使用.submenu:hover時，你同樣是在處理所有內容。

只考慮:hover內把你真正需要的懸停（背景色），而不是應用的風格一大堆，可能同樣是「預加」：

.option 
{ 
    font-style: normal; 
    cursor: pointer; 
    box-sizing: border-box; 
    transition-property: background; 
    transition-duration: .4s; 
    left: 0; 
    top: 0; 
    -webkit-transform: skew(-25deg); 
} 
.option:hover { 
    background-color: rgba(0, 0, 0, 0.3); 
} 
.option .submenu { 
    background-color: rgba(0, 0, 0, 0.3); 
} 


.option span.transition 
{ 
    -webkit-transform: skew(25deg); 
} 

見這個更新的小提琴：https://jsfiddle.net/34ho1fd9/4/