Смена скрипта в зависимости от класса
Здравствуйте, есть сайт и при наведении курсора на картинку, она затемняется, точнее меняется ее прозрачность.
Но проблема в том что при наведении на блок с текстом, обертка слоя так же затемняется. Возможно ли сделать так, что бы при наведении курсора изменялась только прозрачность изображений, а текст оставался неизменным? Спасибо P.S. И если возможно обьясните простым языком, или дайте сниппет, так как я в JS не силен Вот код который использовался
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function( ){
jQuery('.rel')
.on('mouseenter', function() {
jQuery(this).stop().animate({opacity: "0.8"}, 300);
})
.on('mouseleave', function() {
jQuery(this).stop().animate({opacity: "1"}, 300);
})
});
</script>
|
попробуйте поменять селектор (снизу изменения,т.е. другой код не изменяется, кроме одной строки)
jQuery('.rel')
// --->
jQuery('.rel img')
|
Спасибо большое, действительно очень простое решение, не заметил этого!
|
как вариант:
<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function( ){
//jquery
$('.block').hover(
function()
{
$(this).children().eq(0).stop().animate({opacity: "0.1"}, 300);
},
function()
{
$(this).children().eq(0).stop().animate({opacity: "0.8"}, 300);
})
});
</script>
</script>
<style type="text/css">
body
{
background-color: green;
}
.block
{
width: 200px;
height: 200px;
position: relative;
}
.child
{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
.bg
{
background-color: black;
opacity: 0.8;
}
.content
{
font-family: arial;
font-size: 15px;
color: white;
}
</style>
</head>
<body>
<div class="block">
<div class="child bg"></div>
<div class="child content">123232323123123123</div>
</div>
</body>
</html>
|
ещё вариант )))
jQuery.noConflict();
jQuery(document).ready(function( ){
jQuery('.rel')
.on('mouseenter',"img", function() {
jQuery(this).stop().animate({opacity: "0.8"}, 300);
})
.on('mouseleave',"img", function() {
jQuery(this).stop().animate({opacity: "1"}, 300);
})
});
|
Спасибо большое за ответы ребят
|
| Часовой пояс GMT +3, время: 22:10. |