1

$(document).ready(function() {
  $('.menu').mouseenter(function() {
    $(this).css("background-color", "F5F5F5");
  });
  $('.menu').mouseleave(function() {
    $(this).css("background-color", "#F5FFFA");
  });
});
<head>
  <title></title>
  <link rel='stylesheet' type='text/css' href='stylesheet.css' />
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type='text/javascript' src='script.js'></script>
</head>

<body>
  <div id="nav">
    <ul class="pull-left">
      <div class="menu"><a href="">Official site</a>
      </div>
    </ul>
    <ul class="pull-right">
      <div class="menu"><a href="">Про комплекс</a>
      </div>
      <div class="menu"><a href="">Планування</a>
      </div>
      <div class="menu"><a href="">Інфраструктура</a>
      </div>
      <div class="menu"><a href="">Контакти</a>
      </div>
    </ul>
  </div>

При наведении на див класса меню ничего не происходит.

1
  • не уверен, что проблема в этом, но у Вас в обработчике mouseenter у цвета в формате HSL нет решетки спереди
    – Airat
    10 мая 2015 в 17:13

4 ответа 4

1

Код вроде верный, вероятно что script.js, в котором, вероятно, и есть код смены цвета, выполняется раньше, чем грузится jQuery.

0

Вот ваш сниппет с подключенным jquery и разными цветами. Все отлично работает:

$(document).ready(function(){
$('.menu').mouseenter(function(){
    $(this).css("background-color", "#000000");
});
 $('.menu').mouseleave(function(){
   $(this).css("background-color", "#FFFFFF");
});
});
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
   <div id="nav">
    <ul class="pull-left">
      <div class="menu"><a href="">Official site</a></div>
    </ul>
    <ul class="pull-right">
      <div class="menu"><a href="">Про комплекс</a></div>
      <div class="menu"><a href="">Планування</a></div>
      <div class="menu"><a href="">Інфраструктура</a></div>
      <div class="menu"><a href="">Контакти</a></div>
    </ul>
</div>

0

Можна в CSS прописать, зачем Jquery?

a{
    background-color: #F5FFFA;
}

a:hover{
    background-color: #F5F5F5;
}
<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css' />
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <div id="nav">
      <ul class="pull-left">
        <div class="menu"><a href="">Official site</a>
        </div>
      </ul>
      <ul class="pull-right">
        <div class="menu"><a href="">Про комплекс</a>
        </div>
        <div class="menu"><a href="">Планування</a>
        </div>
        <div class="menu"><a href="">Інфраструктура</a>
        </div>
        <div class="menu"><a href="">Контакти</a>
        </div>
      </ul>
    </div>

0

В данной строке вы забыли поставить решетку.

Было:

$(this).css("background-color", "F5F5F5");

Должно быть:

$(this).css("background-color", "#F5F5F5");

Автор ответа: Гайк Инанц, преподаватель HackerU

Ваш ответ

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

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