当鼠标悬停时，文饰下划线也被旋转

我有一个奇怪的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

当鼠标悬停时，文饰下划线也被旋转

回答

相关问题