Вход

Просмотр полной версии : Нужно перебрать элементы добавить их в массив и добавить к элементам класс

Сергей_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
чтобы при наведении на каждую картинку, допустим она немного увеличивалась в размере.
Это делается с помощью 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
а начиная с 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

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