Форум

Сергей_FE · #1 (**permalink**) 29.08.2015, 23:37

Есть html:

<div class="col-xs-12 col-sm-12 col-md-5" id="social-icons">
				<a href=""><img src="img/facebook.png" alt="facebook"></a>
				<a href=""><img src="img/linkedin.png" alt="linkedin"></a>
				<a href=""><img src="img/twitter.png" alt="twitter"></a>
				<a href=""><img src="img/pinterest.png" alt="pinterest"></a>
				<a href=""><img src="img/dribbble.png" alt="dribbble"></a>
				<a href=""><img src="img/google-plus.png" alt="google-plus"></a>
			</div>

Нужно с помощью jQuery и css класса, чтобы при наведении на каждую картинку, допустим она немного увеличивалась в размере.

У меня есть такой код, но он не работает

$(document).ready(function(){
    $('#social-icons a img').hover(function(){

         var myArray =[];

         $('#social-icons img').each( function() {
             myArray.push($(this.id).addClass( "ic" );

         })
    });  
});

Lemme · #2 (**permalink**) 30.08.2015, 02:33

$('#social-icons').on('mouseover', 'img', function() {
	$(this).addClass('ic');
});

?

cyber · #3 (**permalink**) 30.08.2015, 12:39

Сергей_FE,

$(document).ready(function(){
    $('#social-icons a img').hover(function(){
         var elementsArray =  $('#social-icons a img');

        elementsArray.addClass("ic");
    });  
});

рони · #4 (**permalink**) 30.08.2015, 12:58

css на вас нету!

cyber · #5 (**permalink**) 30.08.2015, 13:27

рони,
какой вопрос такой и ответ))

EmperioAf · #6 (**permalink**) 30.08.2015, 14:07

Сообщение от Сергей_FE

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

Это делается с помощью css:

http://htmlbook.ru/css/hover
http://htmlbook.ru/css/width
http://htmlbook.ru/css/height

Lemme · #7 (**permalink**) 30.08.2015, 16:19

EmperioAf, а начиная с ie9, через transform

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 50px;
			height: 50px;
			background: #123;
		}
		div:hover{
			transform:scale(1.25);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

EmperioAf · #8 (**permalink**) 30.08.2015, 16:44

Сообщение от Lemme

а начиная с ie9, через transform

я всегда думал, что transform для браузера более затратен чем более ранние аналоги(для translate и scale). Разве нет?

Lemme · #9 (**permalink**) 30.08.2015, 17:06

EmperioAf, не заморачивался над подобным вопросом, но мне кажется, что он делать тоже самое, что и width, height, только внутри своего движка (или как то так).

width: 50px;
height: 50px;
transform: scale(1.25);
=
width = width * 1.25
height = height * 1.25

только мы этого не видим.

Но это лишь предположение )

Форум

Справочник

Discord чат

Курсы javascript