호버의 jQuery 변경 이미지

jQuery의 정말 멋진 특징은 화면의 특정 영역으로 마우스를 움직일 때와 같이 이미지를 동적으로 변경하는 기능입니다.

수행 방법 : 이미지 SRC 속성을 참조하고 2 기능을 통해 변경합니다. 첫 번째 함수는 이미지를 변경하고 두 번째 기능은 다시 변경됩니다. 그런 다음 HTML에서 마우스가 함수를 트리거하는 영역에 이벤트를 추가합니다 (이 트리거도 JavaScript에 추가 될 수 있음). 그렇게 간단합니다. 라이브 데모를 참조하십시오 jQuery 변경 이미지 동적으로 다음은 HTML로 들어갑니다.

jQuery 이미지 호버 효과에 대한 자주 묻는 질문

jQuery를 사용하여 호버에서 이미지를 변경하려면 jQuery를 사용하여 호버의 이미지를 변경하려면 Hover () 메소드를 사용해야합니다. 이 방법은 마우스 포인터가 선택한 요소 위로 떠날 때 실행할 두 가지 기능을 지정합니다. 첫 번째 함수는 마우스가 HTML 요소로 들어가면 실행되며, 마우스가 HTML 요소를 떠날 때 두 번째 함수가 실행됩니다. 간단한 예는 다음과 같습니다.

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>	<span>//alert("open");
</span>	<span>var name_element = $('#twitter-image'); 
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>	<span>//alert("closed");
</span>	<span>var name_element = $('#twitter-image');
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

$ (document) .ready (function () {) {

$ ( "img"). hover (function () {

$ (this) .attr ( "src", "image2.jpg"); }, function () {

$ (this); }); });

이 예에서는 이미지 위로 마우스를 올리면 'image2.jpg'로 변경됩니다. 마우스를 멀리 이동하면‘Image1.jpg’로 다시 변경됩니다.

jQuery 대신 CSS를 사용하여 호버에서 이미지를 변경할 수 있습니까?

예, CSS를 사용하여 호버에서 이미지를 변경할 수 있습니다. 이것은 호버 의사 클래스를 사용하여 수행 할 수 있습니다. 예는 다음과 같습니다.
img : hover { content : url ( 'image2.jpg'); } 이 예에서는 이미지 위로 마우스를 올리면 'image2.jpg'로 변경됩니다. 그러나이 방법은 마우스가 이미지를 떠날 때 이미지를 뒤로 변경하는 방법을 제공하지 않습니다. 해당 기능의 경우 JavaScript 또는 jQuery를 사용해야합니다.
jQuery를 사용하여 다른 DIV의 호버에서 이미지를 변경하려면 다른 DIV의 Hover의 이미지를 변경하려면 Hover () 메소드를 Find () 메소드와 조합하여 사용할 수 있습니다. find () 메소드는 선택한 요소의 자손 요소를 반환합니다. 예는 다음과 같습니다.
$ (document) .ready (function () { $ ( "#div2"). 찾기 ( "img"). att ( "src", "image2.jpg"); $ ( "#div2"). find ( "img"). attr ( "src", "image1.jpg");
}); jQuery를 사용하여 목록 항목의 호버 이미지를 어떻게 변경할 수 있습니까?

목록 항목의 호버 이미지를 변경하려면 hover () 메소드를 Children () 메소드와 함께 사용할 수 있습니다. Children () 방법은 선택된 요소의 모든 직접 어린이를 반환합니다. 예는 다음과 같습니다.

$ (document) .ready (function () { $ (this) .children ( "img"). attr ( "src", "im $ (이) 마우스를 목록 항목에서 멀어지게하면 자식 이미지가 'Image1.jpg'로 다시 변경됩니다.
jQuery를 사용하여 호버에서 이미지가 변경 될 때 전환 효과를 추가 할 수 있습니까?
이미지가 호버에서 변경 될 때 전환 효과를 추가 할 수 있습니다. 이 방법들은 선택된 요소에 대한 불투명도를 숨겨진 곳에서 가시 (Fadein) 및 가시에서 숨겨진 (Fadeout)로 점차적으로 변경합니다. 예는 다음과 같습니다.
$ (document) .ready (function () {) {
$ ( "img"). hover (function () {
$ (this) .fadeout (500, function (). function () { $ (this) .fadeout (500, function () {
$ (this) .attr ( "src", "image1.jpg"). fadein (500);

위 내용은 호버의 jQuery 변경 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!