클릭 한 후 CSS 호버 불투명도 제거

Question

이미지 위에 마우스를 올리면 CSS 불투명도 변환 규칙을 제거하려고합니다. 항목을 클릭 한 후에 어떻게 이런 일이 일어나지 않게 할 수 있습니까?

JSFIDDLE 내가 마우스 후 제거 트링하고있어 CSS는

#grid li a:hover img { 
    -webkit-transition: opacity .2s ease-in; 
    -moz-transition: opactiy .2s ease-in; 
    -ms-transition: opacity .2s ease-in; 
    -o-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 
    opacity: 1; 
    } 

#grid:hover li { 
    -webkit-transition: opacity .2s ease-in; 
    -moz-transition: opactiy .2s ease-in; 
    -ms-transition: opacity .2s ease-in; 
    -o-transition: opacity .2s ease-in; 
    transition: opacity .2s ease-in; 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 0.3; 
    } 

나는 JQuery와의 같은 (아래 참조) 할 것인가를 클릭

<ul id="grid"> 
    <li><div class="title"></div><a href="#"class="zoom"><img src="1.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom" ><img src="2.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="3.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="4.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="5.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="6.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="7.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom"><img src="8.jpg"><span></span></a></li> 
    <li><div class="title"></div><a href="#" class="zoom" ><img src="9.jpg"><span></span></a></li> 
</ul> 
    <div id="hidden"></div> 

HTML?

$(this).removeClass('grid'); 

Answer 1

당신이 이런 식으로 뭔가를 시도 작동 하는가?

a.image img:target 
{ 

} 

Answer 2

당신은 ID 속성,하지 class을 사용하고 있습니다.

변경 <ul id="grid">

그리고이 .grid에 CSS에서 사용되는 whenrever #grid<ul class="grid">합니다.

그런 다음 jQuery를

는

$(this).removeClass('grid'); 

는 벌금 :

Answer 3

변경

$(this).removeAttr('id'); 

또는 <ul id="grid">() jQuery를 기능

Answer 4

나는 .click을 사용하십시오 <ul class="grid">에 :

<a class="image" href="#image"> 
    <img src="image.png" id="image" /> 
</a> 

그리고 CSS에서

$(".grid").click(function() { 
     $(this).removeClass('grid') 
}); 

또한 CSS 스타일을 ID 대신 Class로 변경하십시오. 현재는 #grid입니다. 작동하려면 .grid이 필요합니다.