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

发布于 2024-11-14 11:32:42 字数 1276 浏览 1 评论 0原文

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

目前我有整个 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
    });
});

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

谢谢。

原文

I am having trouble with my navigation at the moment, I am trying to have an inline list display an image similar to an underline with a fade in and out.

currently I have the whole li fading in and out, text included. I only want the image to fade in and out under the text.

I am not the best at jQuery, it is a bit of a combination of tutorials at the moment.

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

Any help would be much appreciated as this has had me stuck for awhile!

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揽月 2024-11-21 11:32:42

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

编辑：它有效，演示

Since the anchor tag is a child of the LI it will fade out with it's parent, have you considered adding an hr element to the li?

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

EDIT: it works, demo

回复收藏 0 原文