當鼠標懸停時，文飾下劃線也被旋轉

我有一個奇怪的CSS問題，因爲在這裏可以看到這個的jsfiddle https://jsfiddle.net/4x17wLoj/當鼠標懸停時，文飾下劃線也被旋轉

<ul class="menu"> 
<li class="hasChildren menuItem"> 
    <a href="/about-us/our-story.html" class="menuItemLabel"> 
     Our story 
    </a> 
</li> 
</ul> 

.menuItemLabel:before { 
    content:"\e008"; 
    font-family: 'Glyphicons Halflings'; 
    float: right; 
    margin-left: 10px; 
    -webkit-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    transition: .05s; 
    font-size: 10px; 
    width: 10px; 
    height: 10px; 
    color: black; 
} 



    .menuItemLabel:hover:before { 
    -webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    text-decoration: none; 
    }

它的工作確定在所有瀏覽器。但是，在IE10上，當我鼠標懸停在文本上顯示下劃線（這是可以的）。但是，圖標旁邊有一個額外的行。我認爲這是因爲我正在使用css3旋轉圖標。這反過來也旋轉文本下劃線。

請幫忙嗎？徘徊時，我不想讓圖標在圖標旁邊。我確實希望保留文字裝飾僅限文字。

來源

2015-09-07 Hello Universe

嘛，跨瀏覽器的兼容性意味着設法應付IE大部分的時間，併爲你的情況，這裏的修復，將下面的代碼添加到您的CSS，並將它徘徊，而不下面的線;

li a:hover { 
    text-decoration:none; 
}

來源

2015-09-07 03:41:12

這也意味着我不會有連文本任何懸停。我想讓文字修飾只針對文字而不是針對圖標。 –

是的，請原諒我的忽略，現在就解決方案... –

似乎溢出：隱藏工作。 Weird.why？ –

我解決它使用溢出：隱藏如下

.menuItemLabel:hover:before { 
    overflow:hidden 
}

來源

2015-09-07 05:15:05

當鼠標懸停時，文飾下劃線也被旋轉

回答

相關問題