0

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

JSFIDDLE HTML

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

4 回答 4

1

你有没有尝试过这样的事情？

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

在CSS中：

a.image img:target
{

}
于 2013-07-25T17:45:16.227 回答
1

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

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

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

于 2013-07-25T17:49:28.797 回答
0

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

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

并且#grid无论何时在您的 CSS 中使用它来.grid.

然后你的 jQuery

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

应该可以正常工作:)

于 2013-07-25T17:32:57.497 回答
0

改成

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

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

于 2013-07-25T17:49:00.977 回答