单击项目后删除css悬停不透明度答案

【问题标题】：remove css hover opacity after item clicked单击项目后删除css悬停不透明度
【发布时间】：2013-07-25 17:30:24
【问题描述】：

当您将鼠标悬停在图像上时，我正在尝试删除我拥有的 CSS 不透明度过渡规则。单击项目后如何避免这种情况发生。

<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');

【问题讨论】：

标签： jquery html css

【解决方案1】：

你尝试过这样的事情吗？

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

在css中：

a.image img:target
{

}

【讨论】：

【解决方案2】：

我会使用 .click() jQuery 函数：

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

另外，将您的 CSS 样式更改为 Class 而不是 ID。现在是#grid。你需要.grid 才能工作。

【讨论】：

感谢大家的帮助，我整理了一个 jsfiddle，因为我可以看到它可以正常工作link
如果这是你的答案，或者与你的答案有些相符，请在这个问题上打勾……它在投票点箭头的下方。

【解决方案3】：

您使用的是ID 属性，而不是class。

将<ul id="grid"> 更改为<ul class="grid">

而#grid 在您的 CSS 中使用时，.grid。

然后是你的 jQuery

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

应该可以正常工作:)

【讨论】：

感谢一百万#grid 到 .grid 的帮助。出于某种原因，我可以得到 $(this).removeClass('grid');删除我尝试过的课程或其他课程
我注意到您在 jsFiddle 中使用的是 removeClass('.grid')。将其更改为 removeClass('grid') ;)。它已经知道您要删除该类，因此您不需要 . 作为类选择器。
还有另一件事 - 你试图从不是“网格”的东西中删除“网格”。看看这个，已经成功移除类了：jsfiddle.net/XYZZx/32

【解决方案4】：

改成

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

或<ul id="grid"> 到<ul class="grid">

【讨论】：