1

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

<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;
}

这段代码正在运行，但是我尝试向这个箭头幻影添加过渡，以使其看起来更平滑，而不是以粗暴的方式出现。不幸的是我失败了，我不知道这是否可能。还有其他方法，但由于我面临这个问题，我想扩展我的知识并了解如何使这项工作。

提前感谢大家的帮助！

4

1 回答 1

0

试试这个：
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 演示

于 2013-08-01T05:48:38.577 回答