Question

I have a standard list where the user clicks the headings and scrolls down items in currently hidden DIVs using jQuery’s slideToggle().

In the tag my CSS file declares that:

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}

But once it’s click I want that hover image to be different (i.e. an X icon to close the blind). How can I set this using the jQuery?

I can find out the state of my DIV no problem. Currently my Jquery looks like this (unfinished):

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":

                    break;
                case "block":

                    break;
            }
        });

in the switch(state) I want to modify the CSS for the a:hover. How can I achieve this?

Answer 1

If my understanding is correct and you need to change only hover image, you can do something like below.

Create css like this:

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}
a.showBlind.closeIcon:hover {background:url('img/close.png') right center no-repeat;}

and than in your code

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":
                    $(this).removeClass('closeIcon');
                    break;
                case "block":
                    $(this).addClass('closeIcon');    
                    break;
            }
        });