Question

我目前在浏览时遇到问题，我试图让内联列表显示类似于下划线的图像，并且淡入淡出。

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

我不是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

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

Answer 2

由于锚标记是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

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

2 个答案: