Проблема с JQuery с изображением и текстом

Проблемы с попыткой получить этот код jquery. Идея заключается в том, что непрозрачность должна измениться, когда изображение выделено. В настоящий момент используется тег класса smallartcov для изменения непрозрачности. Проблема в том, что на нем есть текст. Таким образом, текст считается, когда мышь покидает область изображения, даже если она никогда не делалась. Как я могу обойти это?Проблема с JQuery с изображением и текстом

http://169.231.6.197/vathom/artist.php Здесь находится тестовый объект. Если вы посмотрите @ на правую картинку, вы можете видеть, что я имею в виду. Вот HTML, мы имеем на это:

<div class="artistg"> 
    <div class="smallartcov"></div><span class="smallarttxt">702</span> 
    <img class="smallartpic" src="images/df.jpg" /> 
</div>

вместе со следующим JQuery:

<script type="text/javascript"> 
$('.smallartcov').hover(function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0'); 
}, function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0.5'); 
}); 
</script>

Любые идеи? Очень признателен.

источник

2012-04-24 MasterGberry

Вы имеете в виду, что счет должен увеличиваться при наведении и должен быть запомнен для любого нового запроса страницы? – Ankit

убедитесь, что вы загрузили скрипт на DOM ready – elclanrs

вы хотите скрыть текст? – Jack

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

$('.smallarttxt').hover(function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0'); 
}, function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0.5'); 
});

источник

2012-04-24 05:13:11

Блестящий! Почему я об этом не подумал. Благодаря :) – MasterGberry

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

<script type="text/javascript"> 
$('.smallartpic').hover(function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0'); 
}, function() { 
    $(this).css('color', 'white'); 
    $(this).css('opacity', '0.5'); 
}); 
</script>

источник

2012-04-24 05:08:41

Вы можете установить z-index: 1; в smallartcov класс, но тогда текст также серым цветом.

источник

2012-04-24 05:12:02 Vertigo

Вы попытались использовать JS .hover до полного элемента artistg, содержащий всю информацию? Возможно, применение JS к содержащему div приведет к тому, что ваша мышка будет парить над текстом, а не «покинуть» состояние зависания. Курсор может по-прежнему превращаться в I-лучу, но пока вы все еще получаете эффект непрозрачности наведения, вы можете использовать CSS, чтобы держать курсор на том, что вы хотите, чтобы не нарушить наведение изображения.

источник

2012-04-24 05:17:19

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

$('.artistg').hover(function() { 
     $(this).find('.smallartcov').css('opacity', 0); 
    }, function() { 
     $(this).find('.smallartcov').css('opacity', .5); 
    } 
);

Работа демо здесь: http://jsfiddle.net/jfriend00/LnLpM/

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

источник

2012-04-24 05:24:52 jfriend00

Проблема с JQuery с изображением и текстом

ответ

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