Использование JQuery для увеличения изображения при наведении курсора мыши/парить

Question

DEMO Это мой код до сих пор

Ищу, чтобы увеличить каждое изображение отдельно при наведении курсора мыши или зависать с помощью JQuery. У меня есть костяк кода, который я думаю, но он еще не полностью работает. Я полный новичок в jQuery, поэтому, пытаясь понять, что некоторые статьи в Интернете сложны, и это так близко, что я вижу, как я получаю после того, как потратил час на эту проблему.

HTML

<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" id="test" alt="" /> 
<br> 
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" id="test1" alt="" /> 

JQuery

$('#test').hover(function() { 
$(this).css({ width: "100%", height: "100%" }); 
}, function() { 
     $(this).css({ width: auto, height: auto }); 
}); 

Answer 1

Пожалуйста, попробуйте этот

$(document).on({ 
    mouseenter: function() { 
     $(this).css({ width: "100%", height: "100%" }); 
    }, 

    mouseleave: function() { 
     $(this).css({ width: "auto", height: "auto" }); 
    } 
}, '#test'); 

Fiddle Demo

Ваш ответ пропускал $(this).css({ width: "auto", height: "auto" });

$('#test').hover(function() { 
$(this).css({ width: "100%", height: "100%" }); 
}, function() { 
     $(this).css({ width: "auto", height: "auto" }); 
}); 

Demo Your Answer

Answer 2

$('#test').hover(function() { 
    $(this).css({ width: "100%", height: "100%" }); 
}).mouseleave(function() { 
    $(this).css({ width: "auto", height: "auto" }); 
}); 

И вам нужно иметь JQuery установить в jsfiddle https://jsfiddle.net/1mnLwgny/

Answer 3

1.auto не является переменной. положить в кавычках

2. Добавить библиотеку JQuery

Working Demo

$('#test').hover(function() { 
$(this).css({ width: "100%", height: "100%" }); 
}, function() { 
     $(this).css({ width: "auto", height: "auto" }); 
}); 

Answer 4

Не забудьте включить JQuery в вашей скрипке.

$('#test').hover(function() { 
$(this).css({ width: "100%", height: "100%" }); 
}, function() { 
     $(this).css({ width: "auto", height: "auto"}); 
}); 

Рабочая версия: Fiddle

Answer 5

Это будет работать на обоих изображениях и увеличить их отдельно

$('img').on('mouseover', function() { 
    $(this).css({ width: "100%", height: "100%" }); 
}); 

еще одну вещь, вы DEMO не JQuery включен.

Answer 6

Вы почти там. Просто вы забыли включить библиотеку JQuery.

Включите его <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

И изменить JQuery к следующему:

$('img').hover(function() { 
$(this).animate({ width: "100%", height: "100%" }); 
}).mouseleave(function() { 
     $(this).animate({ width: "auto", height: "auto" }); 
}); 

Working Fiddle