Непрозрачность не устанавливается при наведении

У меня есть основное выпадающее меню. Когда я наводил курсор на различные варианты меню, он должен установить opacity: 1. Он начинается с .5.Непрозрачность не устанавливается при наведении

Вот парения-часть моей JQuery:

$('#cat1 > li > a').hover(function() { 
    $(this).css({ 
     color: '#dc692e', opacity: 1 
    }); 
}, function() { 
    $(this).css({ 
     color: '#fff', opacity: .5 
    }); 
});

Вот полная скрипка: http://jsfiddle.net/Nilzone/HnmHh/

Спасибо за вашу помощь!

источник

2013-07-05 Nilzone-

Я исправил вашу скрипку. По крайней мере, * попробуйте * использовать доступные инструменты. http://jsfiddle.net/HnmHh/1/ Просто использование «JSHint» дает вам множество ошибок. Кроме того, почему вы не используете CSS для этого? –

Было бы лучше, если бы вы также объяснили, что вы делаете, вместо того, чтобы просто говорить то, что вам нужно. – Joum

, как и выше, я бы использовал RGBA –

Использование $('#cat1 > li > a').hover(... не работает, поскольку в то время, когда этот код работает, элементы a еще не существуют. Вам нужно либо запустить этот код сразу после добавления этих элементов (в пределах $.getJSON() обратного вызова), или использовать делегированные обработчик событий на элемент, который существует изначально:

$('#cat1').on({ 
    mouseenter : function() { 
     $(this).css({ 
     color: '#dc692e', opacity: 1 
     }); 
    }, 
    mouseleave : function() { 
     $(this).css({ 
     color: '#fff', opacity: .5 
     }); 
    } 
},'li > a');

Демо: http://jsfiddle.net/HnmHh/11/

Селектор 'li > a' прошел поскольку отдельный параметр до .on() проверяется каждый раз, когда происходят события, поэтому обработчики работают с динамически добавленными элементами.

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

источник

2013-07-05 11:13:18 nnnnnn

Работал как шарм, спасибо. Но основываясь на других комментариях, я действительно должен использовать CSS для этого! Редактировать: Также очень хорошее объяснение! –

Спасибо. Да, CSS - это способ пойти на такой эффект, но важно понять принцип, связанный с тем, чтобы заставить работать JavaScript, потому что это применимо к другим случаям, когда CSS не может вам помочь. Люди часто задают вопросы о том, почему их обработчики событий не работают с динамически добавленными элементами. – nnnnnn

Вы можете использовать анимацию, чтобы изменить непрозрачность.

$('#cat1 > li > a').hover(function() { 
    $(this).animate({opacity: 1}, 500); 
});

источник

2013-07-05 11:14:32

Непрозрачность не устанавливается при наведении

ответ

Смежные вопросы