jquery - 单击元素后删除 css 悬停不透明度

Question

我正在尝试删除当您将鼠标悬停在图像上时我拥有的 css 不透明度转换规则。单击元素后如何避免这种情况发生。

JSFIDDLEHTML

<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>

我尝试在单击鼠标后删除的 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 中做类似(见下文)的事情吗？

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

Answer 1

你试过这样的事情吗？

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

在 CSS 中:

a.image img:target
{

}