Fade non-:hover images by class
I have a grid of images. For the sake of my question, let's say there are different categories of images: cats, dogs and cars. All images belong to one of these categories, but all are different. When the page is loaded, all images have their opacity lowered to
0.7.
So far I've got:
- $(document).ready(function(){
- $("img").fadeTo("slow", 0.7);
-
- $("img").hover(function(){
- $(this).fadeTo("fast", 1.0);
- },function(){
- $(this).fadeTo("fast", 0.7);
- });
- });
What I'd like to achieve is that when you hover the mouse over a picture of any dog, all images with a class of "dogs" have their opacity adjusted to
1.
Thanks for looking!