0

Парни, подмогните. Что делаю не так? И как исправить? Буду очень благодарен!

 $(".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>

При наведении курсора - должна изменяться высота палочек... Большое спасибо!

2 ответа 2

0

Скорее всего Ваш код в HTML документе подключен раньше чем jquery. Подключите его после jquery и все будет работать как нужно.

<html>

<head>
  <style>
    #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;
    }
  </style>
</head>

<body>
  <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>
</body>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
  $(".arrow").mouseover(function() {
    $(this).css('height', '40px');
  });
</script>

</html>

2
  • jQuery подключен первый, но спасибо! :)
    – Brave_Lime
    28 июн 2016 в 0:24
  • Проверьте, я приложил код.
    – Aim X
    28 июн 2016 в 0:26
0

Перенесите код с изменением свойств css в функцию $(document).ready() и тогда, в Вашем случае, код можно будет описывать в любом месте

$(document).ready(function(){
   $(".arrow").mouseover(function(){
	  $(this).css('height', '40px');
   });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.