Блог

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

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

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

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

        });
    });
 

Я использую его для затухания изображений в 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>
 

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

 $("nav a").hover(
 

и тогда получилось бы что-то вроде:

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

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

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

Ник

Изменить $(".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',
        },

    });
});
 

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

 $("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',
        },

    });
});