호버

Question

내가 가져가에서 강조 표시된 이미지를 보여 주지만, 유지하는 DIV를 만들기 위해 노력하고 유지하면서 클릭하면 강조 보여주는, 다시 클릭 할 때 다시 그것을 어떻게에 복귀해야한다 "onclick을"사업부 토글 배경 위치를 확인하는 방법 였다. 클릭하면 지금까지 내가 가져가 및 표시와 함께 성공

이미지를 강조했다. 그러나 다시 클릭하면 정상적인 호버로 되돌릴 수 없습니다.

JSFiddle : http://jsfiddle.net/muLzfzfu/

HTML :

<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #1</div> 
    <br clear="all" /> 
</div> 
<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #2</div> 
    <br clear="all" /> 
</div> 
<div class="row"> 
    <div class="fav"></div> 
    <div class="label">Option #3</div> 
    <br clear="all" /> 
</div> 

CSS :

.fav { 
    background-repeat:no-repeat; 
    background-position:top; 
    width:26px; 
    height:25px; 
    float:left; 
    background-image:url(http://highviewsweb.com/temp/fav.png); 
    cursor:pointer; 
} 
.fav:hover { 
    background-position:bottom; 
} 
.row{ 
    background-color:#eee; 
    margin-bottom:1px; 
} 

다음

내 코드입니다

자바 스크립트 :

$(document).ready(function(){ 
    $('.fav').click(function(){ 
     $(this).css('background-position-y','0%'); 
     if($(this).css('background-position-y') == '0%'){ 
      $(this).css('background-position-y','100%'); 
     } else { 
      $(this).css('background-position-y','0%'); 
     } 
    }); 
}); 

Answer 1

이를 달성하기 위해 여러 가지 방법이 있습니다, 하나는 좋아하는 버튼에 대한 활성 상태 클래스를 만들고이 .fav:hover 같은 스타일을 사용하게하는 것입니다.

CSS

.fav:hover, .fav-active { 
    background-position:bottom; 
} 

자바 스크립트

$('.fav').click(function() { 
    var $this = $(this); 
    $this.toggleClass('fav-active'); 
}); 

JSFiddle

Answer 2

3 라인 제거 :

를 단순히 클래스를 전환

IF는 항상 true로 평가합니다.

background-position-y: 0%; 

예 :

$(document).ready(function(){ 
    $('.fav').click(function(){ 
     $(this).toggleClass('active'); 
    }); 
}); 

및 CSS 파일에 추가 : http://jsfiddle.net/muLzfzfu/3/

Answer 3

그리고 무엇에 대한 사용

.fav.active{ background-position: bottom; } 

그리고이 CSS를 추가 ?