토글 클래스가 잘 작동하지 않습니다.

내 응용 프로그램에는 일련의 이미지가 나란히 나열되어 있습니다. 이미지를 가리키면 이미지에 대한 정보가 표시됩니다 (설명, 제목 등). 이것은 대부분의 경우에 효과적이지만, 그렇지 않은 경우가 많습니다.토글 클래스가 잘 작동하지 않습니다.

예를 들어 이미지를 가리키고 페이지를 새로 고침 할 때 이미지의 다른 방향 즉 토글 링이 작동합니다. 기본적으로 숨겨진 div가 표시되며 숨겨진 div (다른 모든 이미지는 잘 작동합니다)에있을 때 숨겨집니다.

이것은 정말 짜증나, 나는 그것을 해결하는 방법을 모른다. 아래 코드는이 코드 다.

누군가 나를 도와 주시면 감사하겠습니다.

JS :

$('.post').hover(function() { 
     var image = $(this); 
     image.find('.postDesc').toggle(); 
    });

HTML :

<div class="post"> 
    <img class="images" src="../images/image.png"> 
    <div class="postDesc"> 
     // other code...

CSS :

.post { 
    background: white; 
    width: 200px; 
    height: 200px; 
    margin: 0px auto; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    position: relative; 
    padding: 5px; 
    -moz-box-shadow: 0 0 4px 1px #777; 
    -webkit-box-shadow: 0 0 4px 1px#777; 
    box-shadow: 0 0 4px 1px #777; 
} 

.postDesc { 
    background-color:rgba(136, 136, 136, 0.35); 
    color: white; 
    width: 180px; 
    height:180px; 
    display:none; 
    position:absolute; 
    margin: 5px; 
    left: 0; 
    bottom: 0; 
    padding: 10px; 
}

출처

2012-05-07 holyredbeard

내가 대신 toggleClass 방법을 사용하려고 할 것입니다 :

$(this).find(".postDesc").toggleClass("post");

데모는 this jsFiddle을 참조하십시오.

출처

2012-05-07 18:46:13

답장을 보내 주셔서 감사합니다. 나는 당신의 해결책을 시도했지만, 이미지를 떠오르게 할 때 실제로 아무 일도 일어나지 않습니다. 나는 당신의 코드에서 "postDesc"로 호버링 부분에 대해 작동하는 변경 시도,하지만 이미지에서 커서를 제거하면 클래스 stil 거기에있다. 어쩌면 내가 뭔가 잘못하고있는 걸까요? – holyredbeard

jsFiddle로 업데이트되었습니다. –

코드가 제대로 작동하지 않는 것 같습니다. jsFiddle에서 코드를 사용해 보았지만 클래스는 매우 빠르게 깜박임을 계속 유지합니다. "postDesc"에는 "display : none;"이 있습니다. 그래서 토글 클래스가 작동하는지 궁금합니다. – holyredbeard

$('.post').hover(
function() { 
    $('.postDesc', $(this)).addClass('post'); 
}, 
function() { 
    $('.postDesc', $(this)).removeClass('post'); 
});

출처

2012-05-07 19:00:29 thecodeparadox

내 답변과 거의 똑같지 않습니까? –

토글 클래스가 잘 작동하지 않습니다.

답변

관련 문제