jQuery 将鼠标悬停在文本上以显示带有淡入淡出的图像

Question

目前我的导航有问题，我正在尝试让内联列表显示类似于带有淡入和淡出的下划线的图像。

目前我有整个 li 淡入淡出，包括文本。我只希望图像在文本下淡入淡出。

我不是最擅长 jQuery，目前它是一些教程的组合。

HTML：

<nav>
    <ul>
        <li><a href="">home</a></li>
        <li><a href="">what we do</a></li>
        <li><a href="">our work</a></li>
        <li><a href="">contact us</a></li>
        <li><a href="">blog</a></li>
    </ul>
</nav>

CSS：

nav ul li{
margin: 0 0 0 22px;
padding: 0 0 20px;
display: inline;
background: url(../img/3bullets.png) no-repeat center bottom;
}
nav ul li a{
color: #fff;
font-family: Heiti TC, Tahoma, Verdana;
font-size: 21px;
letter-spacing: -0.5px;
text-decoration: none;
}

JS：

$(document).ready(function(navigationhover){
    $("nav ul li").fadeTo("slow", 0.1); // Sets the opacity to fade down when the page loads
    $("nav ul li").hover(function(){
        $(this).fadeTo("slow", 1.0); // Sets the opacity on hover
    },function(){
        $(this).fadeTo("slow", 0.1); // Sets the opacity on mouseout
    });
});

任何帮助将不胜感激，因为这让我卡了一段时间！

谢谢。

Answer 1

由于锚标签是LI的子标签，它会随着它的父标签淡出，你有没有考虑给li添加一个hr元素？

<ul>
        <li><a href="">home</a><hr></li>
        <li><a href="">what we do</a><hr></li>
        <li><a href="">our work</a><hr></li>
        <li><a href="">contact us</a><hr></li>
        <li><a href="">blog</a><hr></li>
    </ul>

CSS：

nav ul li h2{
background: url(../img/3bullets.png) no-repeat center bottom;
}

JS：

$(document).ready(function(navigationhover){
    $("nav ul li h2").fadeTo("slow", 0.1); // Sets the opacity to fade down when the page loads
    $("nav ul li").hover(function(){
        $('h2', this).fadeTo("slow", 1.0); // Sets the opacity on hover
    },function(){
        $('h2', this).fadeTo("slow", 0.1); // Sets the opacity on mouseout
    });
});

编辑：它有效，demo

Answer 2

为了正确理解您的问题，您想淡化您在 CSS 中设置的背景吗？