마우스 오버시 배경 변경 및 마우스 오버시 마우스 버튼 제거

Question

호버에서 스팬 태그 집합 (클래스)을 강조 표시하는 두 가지 다른 방법을 실험 해 왔습니다 (여기에서이 스레드 : Change background color on mouseover and remove it after mouseout). :

1)

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.pagination_per_page').bind("mouseover", function(){ 
     var color = $(this).css("background-color"); 
     $(this).css("background", '#FFFF00'); 
     $(this).bind("mouseout", function(){ 
     $(this).css("background", color); 
     }) 
    }) 
}) 
</script> 

2)

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.pagination_per_page').hover(
      function(){ 
       var $this = $j(this); 
       $this.data('bgcolor', $this.css('background-color')).css('background-color', '#FFFF00'); 
      }, 
      function(){ 
       var $this = $j(this); 
       $this.css('background-color', $this.data('bgcolor')); 
      } 
     ); 
    }) 
</script> 

모두들 잘 작동의 더 나은 것으로 가정합니다. 문제는 노란색으로 표시된 항목을 가리키고있는 동안 클릭을 배경으로 녹색으로 설정한다는 것입니다 (페이지 당 페이지 수준의 항목이 사용됨을 나타냄). 물론 마우스 오버 상태가 끝나면 두 스크립트가 마우스 오버 전에 원래 상태로 되돌아 가고 내 녹색 배경색 (선택한 페이지 매김 수준을 나타냄)이 마우스 오버 이벤트가 시작되기 전의 배경으로 대체됩니다.

<span id="pagination_per_page_10" class="pagination_per_page" onClick="pagination_per_page('10');" style="cursor:pointer;">&nbsp;10&nbsp;</span>&nbsp; 
<span id="pagination_per_page_20" class="pagination_per_page" onClick="pagination_per_page('20');" style="cursor:pointer;">&nbsp;20&nbsp;</span>&nbsp; 
<span id="pagination_per_page_30" class="pagination_per_page" onClick="pagination_per_page('30');" style="cursor:pointer;">&nbsp;30&nbsp;</span>&nbsp; 
<span id="pagination_per_page_40" class="pagination_per_page" onClick="pagination_per_page('40');" style="cursor:pointer;">&nbsp;40&nbsp;</span>&nbsp; 
<span id="pagination_per_page_50" class="pagination_per_page" onClick="pagination_per_page('50');" style="cursor:pointer;">&nbsp;50&nbsp;</span>&nbsp; 
<span id="pagination_per_page_75" class="pagination_per_page" onClick="pagination_per_page('75');" style="cursor:pointer;">&nbsp;75&nbsp;</span>&nbsp; 
<span id="pagination_per_page_100" class="pagination_per_page" onClick="pagination_per_page('100');" style="cursor:pointer;">&nbsp;100&nbsp;</span>&nbsp; 
<span id="pagination_per_page_ALL" class="pagination_per_page" onClick="pagination_per_page('ALL');" style="cursor:pointer;">&nbsp;ALL&nbsp;</span>&nbsp; 

<script type="text/javascript"> 
    pagination_per_page = function(e) { 
    $j('#pagination_per_page_' + e).css("background-color", '#00FF00'); 

    // set a cookie with the user desired pagination items per page 
    // call some ajax to reload the list 
    // etc. 
    } 
</script> 

클릭이 발생할 경우 원본과 다른 색을 복원하도록 스크립트를 수정할 수 있습니까? 나는 위대한 Javascript가 아니지만 pagination_per_page 함수는 위에서 두 번째 .over 함수의 변수 내용을 변경할 수 있으므로 마우스 아웃 색상 복원은 녹색으로 변경되므로 pagination_per_page 함수는 span을 onclick()으로 설정합니다. ?

감사합니다.

Answer 1

를 사용하여 클래스를 사용할 수 있습니다. 예를 들어, HTML :

<span>where is</span> 
<br/> 
<span>pancake</span> 
<br/> 
<span>house</span> 

CSS :

.hovered { 
    background: #0f0; 
} 
.clicked { 
    color: #fff; 
    background: #00f !important; 
} 

그리고 jQuery를 :

$('span').hover(function() { 
    $(this).toggleClass('hovered'); 
}); 
$('span').click(function() { 
    $(this).addClass('clicked'); 
}); 

그리고 산부인과 - 바이올린 : http://jsfiddle.net/ambiguous/LLR6b/1/

아이디어는 유혹을 전환하는 것입니다 마우스 오버 이벤트 중 클래스를 켜고 끄는 대신 클릭 할 때 항상 다른 모든 것을 재정의하는 클래스를 추가하십시오.

Answer 2

당신은 당신이 클릭 된 배경 색상에 !important을 추가 할 수 있습니다, 대신에 직접 배경 색상을 조작의 unbind

DEMO