Question

我正在尝试删除将鼠标悬停在图片上时的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');

Answer 1

你尝试过这样的事吗？

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

在css中：

a.image img:target
{

}

Answer 2

我使用.click（）jQuery函数：

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

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

Answer 3

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

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

#grid当你在CSS中使用它.grid时。{/ p>

然后你的jQuery

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

应该可以正常工作：）

Answer 4

更改为

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

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

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

4 个答案: