html - jQuery remove class when adding it to other elements -



html - jQuery remove class when adding it to other elements -

i have 6 images in line, first 1 when page loads has class applied using css3 applies web transformations. when other images hovered on same class applied these, removed when mouseout. final thing need accomplish when other images hovered on first 1 has class removed, , if no images hovered on first 1 has class applied again.

here have far:

$(document).ready(function() { $("#imagepackshot li img").hover(function(){ $(this).addclass('packshot').siblings().removeclass('packshot'); }, function () { $(this).removeclass('packshot'); }) .first().addclass('packshot'); });

you'll want check after remove class whether there no other images class 'packshot', in case add together first one.

$(document).ready(function() { var activeclass = 'packshot', images = $("#galleryslideshow li img"); var first = images.first().addclass(activeclass); images.hover(function(){ // remove class images still have it, one. images.filter("."+activeclass).removeclass(activeclass); // add together class element hovered. $(this).addclass(activeclass); }, function () { // remove class image hovered out of $(this).removeclass(activeclass); // if no other images have active class, give first image if(!images.filter("."+activeclass).size()){ first.addclass(activeclass); } }) });

edit:

the code using html structure, based on link posted, means can't utilize "siblings" refer next images, since images aren't siblings in html tree:

<ul id="galleryslideshow"> <li> <a href="page9.html"><img src="thumbnails/thumb9.jpg" width="158" height="236" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> <li> <a href="page9.html"><img class="box2" src="thumbnails/thumb1.jpg" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> <li> <a href="page9.html"><img class="box" src="thumbnails/thumb3.jpg" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> <li> <a href="page9.html"><img class="box1" src="thumbnails/thumb4.jpg" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> <li> <a href="page9.html"><img class="box3" src="thumbnails/thumb5.jpg" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> <li> <a href="page9.html"><img class="box4" src="thumbnails/thumb6.jpg" /></a> <ul id="noimg"> <li> <a href=""><img src="images/more-like-this.png" /></a> </li> </ul> </li> </ul>

jquery html css

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -