0

Всем, привет! Народ помогите разобраться, есть таблица, в ней картинки, при наведении надо добавлять стиль с рамкой, делать это надо с помощью jQuery.

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

Помогите пожалуйста!

Вот здесь накидал код

2
  • 3
    А почему именно jQuery? Через css это одним правилом задается .link a:hover img {border:2px red solid;padding:5px}
    – Owlet
    8 окт 2012 в 14:12
  • Тоже вариант, но надо jQuery, рамка была просто примером. 8 окт 2012 в 14:21

3 ответа 3

2

Перемудрили. Достаточно такого кода:

$(document).ready(function(){

    $("img").mouseover(function() {
        $(this).css('border', '2px red solid');
    });

    $("img").mouseout(function() {
        $(this).css('border', '0px');
    });

});

Разумеется, события, прописанные для ссылок, уже не нужны.

4
  • СПАСИБОМС :) 8 окт 2012 в 14:11
  • А вообще, подобная хренотень задается средствами css. 8 окт 2012 в 14:14
  • Маааленький нюанс, добавляет этот эффект ко всем картинкам, вот это не помогает $(".link img") 8 окт 2012 в 14:27
  • посмотрите мой пример
    – thunder
    8 окт 2012 в 14:31
2

Можно и так:

$(function(){

  $("img").hover(function() {
      $(this).css('border', '2px red solid');
    }, function() {
      $(this).css('border', '');
    });

});
2
1

http://jsfiddle.net/QeVtR/2/

5
  • 1
    применяется только к картинкам внутри элемента с классом .link
    – thunder
    8 окт 2012 в 14:32
  • Да,действительно! Спасибо! А поясните пожалуйста код, если не сложно, две функции через запятую, не сталкивался, мот есть ресурс где можно почитать? 8 окт 2012 в 14:39
  • конечно есть) api jquery называется: api.jquery.com/hover ;) hover принимает на фходе 2 функции: 1аяя, которая выполняется при наведении мышки. 2ая, которая выполняется при убирании мышки с элемента. вообще документацию по jquery почитайте, там много примеров использования. в яваскирпте, а тем более в jquery оно очень часто встречается, так что привыкайте :)
    – thunder
    8 окт 2012 в 14:44
  • ну API понятно :), этим я пользуюсь регулярно, я просто впервые встречаю синтаксис перечисление функций через запятую :) Спасибо, за помощь! 8 окт 2012 в 14:54
  • пожалуйста. js позволяет такие конструкции, да и удобно это)
    – thunder
    8 окт 2012 в 14:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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