JQuery наведите курсор на текст, чтобы отобразить изображение с исчезновением - PullRequest
Новая
       33

JQuery наведите курсор на текст, чтобы отобразить изображение с исчезновением

0 голосов
/ 07 июня 2011

У меня проблемы с навигацией в данный момент, я пытаюсь, чтобы встроенный список отображал изображение, похожее на подчеркивание, с постепенным увеличением и уменьшением яркости.

в настоящее время у меня появляется вся картинкаи вне, текст включен.Я только хочу, чтобы изображение появлялось и исчезало под текстом.

Я не лучший в 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
    });
});

Любая помощь будет высоко ценится, так как это застряло у меня на некоторое время!

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 июня 2011

Так как тег привязки является дочерним элементом LI, он исчезнет вместе со своим родителем, рассматривали ли вы возможность добавления элемента li в 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
    });
});

РЕДАКТИРОВАТЬ: это работает, демо

0 голосов
/ 07 июня 2011

Чтобы правильно понять ваш вопрос, вы хотите, чтобы фон, который вы устанавливаете в css, исчез?

...