Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Нужно перебрать элементы добавить их в массив и добавить к элементам класс (https://javascript.ru/forum/offtopic/58001-nuzhno-perebrat-ehlementy-dobavit-ikh-v-massiv-i-dobavit-k-ehlementam-klass.html)

Сергей_FE 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 30.08.2015 02:33

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

?

cyber 30.08.2015 12:39

Сергей_FE,


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

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

рони 30.08.2015 12:58

:cray: css на вас нету! :)

cyber 30.08.2015 13:27

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

EmperioAf 30.08.2015 14:07

Цитата:

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

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

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

Lemme 30.08.2015 16:19

EmperioAf, а начиная с ie9, через transform :D
<!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 30.08.2015 16:44

Цитата:

Сообщение от Lemme
а начиная с ie9, через transform

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

Lemme 30.08.2015 17:06

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

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

только мы этого не видим. ;) Но это лишь предположение )


Часовой пояс GMT +3, время: 09:22.