Изменение атрибутов CSS объекта при наведении на него мышки

Простой скрипт на jQuery, меняющий css-стиль объекта при наведении на него мышки:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {  // 1 строка
  4. $(".block").mouseover(function (){  // 2 строка
  5. $(this).css("border","1px solid red"); //3 строка
  6.  });
  7.  $(".block").mouseout(function (){
  8.  $(this).css("border","none");
  9.  });
  10. });
  11. </script>
  12. <div class="block">Блок меняющий стиль</div>

Всё просто.  В коде выше мы создали обыкновенный блок div с классом block. Именно с эти блоком мы и будем работать.  И так приступим к написанию jQuery кода который даст нам возможность изменять его css свойства. Разберем строчки скрипта:

  1. Первая строчка скрипта содержит jQuery функцию ready() которая разрешает выполнение кода заключенного в ее тело когда объектная модель документа готова к использованию. Данная функция является аналогом события window.onload
  2. Вторая строчка  отслеживает появление мыши над определенным объектом (в данном случае это элемент с классом block) с помощью события mouseover.
  3. В третье строчке содержится код выполняющий действия над блоком. В данном случае добавляет блоку рамку в 1 пиксель с помощью jQuery фкнкции css(). this в данной строке означает что работаем с этим же блоком над которым отслеживали мышь.

Ну, а дальнейшие строки я думаю вы уже в в состоянии сами объяснить, в них происходят аналогичные действия за исключением того что они происходят в момент когда курсор покидает границы блока.