Question

我做了一个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);
}

JSFiddle

我希望字体保持它的斜体...我无法弄清楚

谢谢！

Answer 1

您需要将display: inline-block;添加到您的：悬停效果中。此外，您多次使用相同的ID标记，这是错误的。您应该使用class="no-underline"和.no-underline, .no-underline:hover

JSFIDDLE： https://jsfiddle.net/f9etuq32/1/

Answer 2

因此，如果我理解正确，你想要的是在翻转时将字体样式更改为斜体，然后当移除鼠标时，更改颜色，但保留斜体。我要做的是：

首先，将相同ID的多个出现更改为类。而不是

<li id='nav'></li>

使用此

<li class='nav'></li>

其次，我会使用JQuery来做你想要的文本。

开始JQuery：

//below makes the color black and the text italics when <li> hovered over
$(".nav").mouseenter(function(){
$(this).css('color', 'black');
$(this).css('font-style', 'italic');
});

然后

//below makes the color back to normal, but leaves the italics when the 
//the mouse goes off the item
$(".nav").mouseleave(function(){
$(this).css('color', 'white');
});

我的概念证明在This Fiddle

悬停时保持字体/文本倾斜

2 个答案: