2017-01-13 26 views
1

내 포트폴리오 웹 사이트를 만들고 있습니다. 문서 준비에 클래스를 추가하고 해당 클래스를 호버에있는 다른 클래스로 변경/변경하려고합니다. lightgallery & CSS 그램 필터를로드 및 마우스 오버시 내 이미지에 사용하고 있습니다. 이전에 목록을 추가했습니다. 불행히도 그것은 내 요구에 잘 작동하지 않았습니다. Previous code준비에 수업 추가, 마우스 센터에서 수업 삭제

$("#gallery a").on({ 
    mouseenter : function() { 
    $(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("mayfair"); 
    }, 
    mouseleave : function() { 
    $(this).find(".nak-gallery-poster").removeClass("mayfair").addClass("inkwell"); 
    } 
}); 

이전 코드의 내용과 일치하도록 jQuery가 변경되었습니다. 이것은 작동하지 않았다. 도와주세요. 내 CodePen

+0

'$ lg is not defined' 오류가 나타납니다 –

+0

코드 펫에 어떤 문제가 있습니까? – andi

+0

는 마우스 입력 기능이 예상대로 작동하지 않는 것 같습니다. – claudios

답변

3

당신의 codepen에서 코드

$lg.lightGallery(); 
    $lg.append(slide); 
    $lg.data('lightGallery').destroy(true); 
    $lg.lightGallery(); 

를 제거, 모든 작품을 잘

일부 플러그인을 놓쳤거나 잘못된 코드를 놓친 것처럼 보입니다.

+0

플러그인이 링크 – Kamalakannan

0

대신 두 개의 클래스 편집을 사용하여이

.inkwell{ 
color: red; 
} 
.inkwell:Hover{ 
color: blue 
} 

이 쉽고 JQuery와보다 지저분하고 배경 색상과 당신이 당신의 필요에 따라 원하는대로 모두를 추가 할 수 있습니다처럼 CSS를

+0

문제는 jQuery 스크립트에 있습니다. – claudios

+0

나는 그가 원하는 것을 알고있다. ... 그는 그 클래스를 잉크 웰이 클래스와 교환해야하고, 누군가가 그 div를 가리키면 CSS hover 속성이 가장 쉬운 해결책이된다. –

-4

안녕하세요 코드 펫 (codeepen)의 코드를 살펴본 결과, mouseenter와 다른 메소드 메소드가 document.ready (function() {.. .}. 나는 이것을 코멘트로 게시하고 싶었지만 나는 그들이 50 포인트 이하의 포인트를 가지고 있기 때문에 나를 그렇게시키지 않을 것이다.

document.ready 안에 코드를 추가하면 제대로 작동합니다. DOM로드 전에 스크립트가 실행되기 때문에 이벤트가 등록되지 않습니다.

그리고 $ lg도 정의되지 않았지만 다른 사람들은 그것을 언급 했으므로 언급했습니다. 지금 추가.

+0

에 포함되어있다. 우리는 문서 준비를 포함 할 필요가없는 Codepen에 있으며, 자동으로 가져옵니다. 그리고 $ lg는 그것으로 불리는 플러그인입니다. 플러그인은 js에 링크가 있습니다. – Kamalakannan