CODEWITHSUNDEEP
jqueryhtmlcss
Wanting to learn
Wanting to learn

Reputation: 468

remove css hover opacity after item clicked

I'm trying to remove a css opacity transition rule I have when you hover over an image. How can I remove this from happening after an item is clicked.

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>

The CSS I'm tring to remove after a mouse click

 #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;
   }

Would I do something like (see below) in jquery?

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

Upvotes: 0

Views: 705

Answers (4)

user1577303
user1577303

Reputation:

Have you tried something like this?

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

And in the css:

a.image img:target
{

}

Upvotes: 1

Aar&#243;n C&#225;rdenas
Aar&#243;n C&#225;rdenas

Reputation: 342

Change to

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

or <ul id="grid"> to <ul class="grid">

Upvotes: 0

Kyle Yeo
Kyle Yeo

Reputation: 2368

I'd use a .click() jQuery function:

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

Also, change your CSS style to Class instead of ID. Right now its #grid. You'll need .grid for it to work.

Upvotes: 1

SharkofMirkwood
SharkofMirkwood

Reputation: 12621

You're using the ID attribute, not class.

Change <ul id="grid"> to <ul class="grid">

And #grid whenrever it's used in your CSS to .grid.

Then your jQuery

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

Should work fine :)

Upvotes: 0

Related Questions