Форум

Dimas95 · #1 (**permalink**) 24.06.2013, 18:54

Здравствуйте, есть сайт и при наведении курсора на картинку, она затемняется, точнее меняется ее прозрачность.
Но проблема в том что при наведении на блок с текстом, обертка слоя так же затемняется. Возможно ли сделать так, что бы при наведении курсора изменялась только прозрачность изображений, а текст оставался неизменным? Спасибо

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>

melky · #2 (**permalink**) 24.06.2013, 19:08

попробуйте поменять селектор (снизу изменения,т.е. другой код не изменяется, кроме одной строки)

jQuery('.rel')
// --->
jQuery('.rel img')

Dimas95 · #3 (**permalink**) 24.06.2013, 19:14

Спасибо большое, действительно очень простое решение, не заметил этого!

skrudjmakdak · #4 (**permalink**) 24.06.2013, 19:17

как вариант:

<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>

рони · #5 (**permalink**) 24.06.2013, 19:20

ещё вариант )))

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);
  })

                    });

Dimas95 · #6 (**permalink**) 25.06.2013, 18:06

Спасибо большое за ответы ребят

Форум

Справочник

Discord чат

Курсы javascript