我做了一个 CSS 悬停事件,当你悬停在导航栏上时,字体会变黑并变成斜体。
当我悬停的时间超过转换所需的 2 秒时,它会恢复正常。
HTML:
<div class="header">
<ul id="header-logo">
<li id="nav"><a href="#" id="title">Josh Murray</a></li>
<li id="nav-spacing"></li>
<li id="nav"><a href="#" id="no-underline">Home</a></li>
<li id="nav"><a href="#" id="no-underline">Portfolio</a></li>
<li id="nav"><a href="#" id="no-underline">Purchase</a></li>
<li id="nav"><a href="#" id="no-underline">About</a></li>
<li id="nav"><a href="#" id="no-underline">Contact</a></li>
</ul>
<div class="bottom-header">
<!-- Gradient goes here -->
</div>
</div>
CSS:
#no-underline {
text-decoration: none;
color: white;
font-family: "Josefin Sans", sans-serif;
font-size: 18px;
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
#no-underline:hover {
color: black;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
我希望字体保持斜体的样子......我想不通
谢谢!
最佳答案
您需要将 display: inline-block;
添加到您的 :hover 效果中。另外,您多次使用相同的 ID 标签,这是错误的。您应该使用 class="no-underline"
和 .no-underline, .no-underline:hover
JSFIDDLE: https://jsfiddle.net/f9etuq32/1/
关于html - 悬停时保持字体/文本倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30292899/