Как применить скрипт наведения курсора jQuery к классу div в ссылке, на которую указывает курсор? - PullRequest
Новая
       19

Как применить скрипт наведения курсора jQuery к классу div в ссылке, на которую указывает курсор?

0 голосов
/ 22 октября 2011

Я не думаю, что мой вопрос настолько ясен, насколько это возможно, но, надеюсь, я смогу прояснить его здесь.

У меня есть следующий скрипт наведения: 

$("nav a#index").hover(
    function() {
        $(".current").animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },

        });
    }, function() {
        $(".current").animate({
            opacity: 0
        }, {
            duration: 3000,
            specialEasing: {
                opacity: 'linear',
            },

        });
    });

Iиспользуйте его, чтобы добавить изображения в div с абсолютным позиционированием: 

<div id="nav1">
     <a href="index.html" class="fade nav top current" id="index">

     <div class="nav-image"><img src="images/bodhi-leaf-green.png"></div>

     <div id="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/home.png"></div>

     </a>
</div>

Поскольку мне нужен эффект наведения на несколько div дивов nav, например nav2, nav3 и т. д., мне нужны скрипты наведения для каждого из нихили, скорее, я надеюсь найти способ написания одного сценария, который работал бы для всех моих навигационных ссылок, поэтому он начинался бы с: 

$("nav a").hover(

, а затем имел бы что-то вроде: 

function() {
            $(this ".current").animate({......

то есть я ищу способ ссылки на класс div в конкретной ссылке href, чтобы я мог добавить это. Надеюсь, это будет понятнее!

Спасибо за любую помощь.

Ник

Ответы [ 2 ]

0 голосов
/ 22 октября 2011

Попробуйте это: 

$("a#index").hover(
function() {
    $(this).parent().find(".current").animate({
        opacity: 1
    }, {
        duration: 300,
        specialEasing: {
            opacity: 'linear',
        },

    });
}, function() {
    $(this).parent().find(".current").animate({
        opacity: 0
    }, {
        duration: 3000,
        specialEasing: {
            opacity: 'linear',
        },

    });
});
0 голосов
/ 22 октября 2011

Изменить $(".current") на $(".current", this): после этого изменения будет изменен только элемент .current в ссылке.
Измените селектор: div[id^=nav] выберет все элементы DIV, чей идентификатор начинается с "nav"

Примечание : изменить id="index" на class="index". 

$("div[id^=nav] a.index").hover(
function() {
    $(".current", this).animate({
        opacity: 1
    }, {
        duration: 300,
        specialEasing: {
            opacity: 'linear',
        },

    });
}, function() {
    $(".current", this).animate({
        opacity: 0
    }, {
        duration: 3000,
        specialEasing: {
            opacity: 'linear',
        },

    });
});
...