У меня есть img (позиция: абсолютная) и div с текстом над ним (позиция: абсолютная). У img есть карта изображения, и проблема в том, что, когда я хочу изменить непрозрачность img при наведении курсора и выходе из области, он вызывает mouseleave, когда я навожу div на изображение. Есть ли простое и элегантное решение для решения этой проблемы?
РЕДАКТИРОВАТЬ: я думаю, что решил это с помощью CSS: я дал «указатель-события: нет» для div над изображением.
вы можете использовать вложенное условие:
если(мышь проходит по изображению)
{ if (мышь находится над этим изображением || если мышь находится над div)
{
do the job;
}
}
Вы можете продублировать код, который вы использовали для изображения, и применить его к div
скажем, при mouseenter img вы устанавливаете значение opcaity, затем делаете то же самое при mouseenter div, когда mouseenter div изменяет opcity изображения, а затем также дублируете код mouseleave, чтобы opcaity устанавливалось обратно если пользователь покидает либо div, либо изображение:
я сделал скрипку: http://jsfiddle.net/KpVag/
$('img').on('mouseenter', function() {
$(this).css('opacity', '0.4');
});
$('img').on('mouseleave', function() {
$(this).css('opacity', '1');
});
$('div').on('mouseenter', function() {
$('img').css('opacity', '0.4');
});
$('div').on('mouseleave', function() {
$('img').css('opacity', '1');
});
[EDIT] Увидев ваш комментарий, я обновил скрипку: http://jsfiddle.net/KpVag/1/
Я сейчас использую stop, чтобы остановить анимацию затухания, поэтому, если мышь покидает изображение, мы запускаем анимацию, но если следующим событием будет mouseenter на нашем div, то мы отменяем анимацию затухания изображения, если после mouseleave есть если в div нет mouseenter, то анимация не отменяется:
$('img').on('mouseenter', function (event) {
console.log('wrapper mouseenter');
$(this).stop().fadeOut('slow', function () {
// on animation finish
});
});
$('img').on('mouseleave', function (event) {
console.log('wrapper mouseleave');
$(this).fadeIn('slow', function () {
// on animation finish
});
});
$('div').on('mouseenter', function (event) {
console.log('wrapper mouseleave');
// stop the image fadein animation
$('img').stop();
});
[/РЕДАКТИРОВАТЬ]
