Парни, подмогните. Что делаю не так? И как исправить? Буду очень благодарен!
$(".arrow").mouseover(
function(){
$(this).css('height', '40px');
}
)
#main{
width: 300px;
height: 100px;
}
.arrow{
float: left;
width: 3px;
background: white;
cursor: pointer;
background: #000;
margin-left: 10px;
}
.arrow_mini{
height: 15px;
}
.arrow_big{
height: 25px;
}
<div id="main">
<div class="arrow arrow_big arrow_1"></div>
<div class="arrow arrow_mini arrow_2"></div>
<div class="arrow arrow_mini arrow_3"></div>
<div class="arrow arrow_mini arrow_4"></div>
<div class="arrow arrow_mini arrow_5"></div>
<div class="arrow arrow_mini arrow_6"></div>
<div class="arrow arrow_mini arrow_7"></div>
<div class="arrow arrow_mini arrow_8"></div>
<div class="arrow arrow_mini arrow_9"></div>
<div class="arrow arrow_big arrow_10"></div>
</div>
При наведении курсора - должна изменяться высота палочек... Большое спасибо!