Question

大家好，对不起我的英文，标题似乎不太明显。这是我想要做的。我的导航如下：

<nav>
        <ul>
            <li><a href=""><?php echo __("accueil"); ?></a></li>
            <li><a href=""><?php echo __("biographie"); ?></a></li>
            <li><a href=""><?php echo __("agenda"); ?></a></li>
            <li><a href=""><?php echo __("archives"); ?></a></li>
            <li><a href=""><?php echo __("programmes"); ?></a></li>
        </ul>
</nav>

我希望悬停在每个导航链接的左侧附加一个箭头。到目前为止，这是我的CSS：

nav li a{
    color: #747474;
    font-size: 16px;
    text-transform: capitalize;
}
nav li:hover:before{
    content: '> ';
    color: #fff;
}

此代码正常运行，但我尝试向此箭头幻像添加转换，使其看起来更平滑，而不是以残酷的方式出现。不幸的是我失败了，我无法想象这是否可能。还有其他方法，但由于我正面临这个问题，我想扩展我的知识，并了解如何使这项工作。

提前感谢大家的帮助！

Answer 1

试试这个：
HTML：

<nav>
    <ul>
        <li><span>></span><a href="">aaa</a></li>
        <li><span>></span><a href="">bbb</a></li>
        <li><span>></span><a href="">ccc</a></li>
        <li><span>></span><a href="">ddd</a></li>
        <li><span>></span><a href="">eee</a></li>
    </ul>
</nav>

CSS：

nav li a{
    color: #747474;
    font-size: 16px;
    text-transform: capitalize;
}

JS：

$(document).ready(function(){
    $('li').find('span').hide();
    $('li').mouseenter(function(){
        $(this).find('span').fadeIn('slow');
    }).mouseout(function(){
        $(this).find('span').fadeOut('slow');
    });
});

JSFIDDLE DEMO

css3在悬停时的内容之前转换

1 个答案: