changing style to that of hover using css and jquery

Question

I'm trying to change the styling of the list item that holds my link on click, so the style of that <li> changes to that of the hover style. But adding $(this).addClass('hover'); doesn't seem to work. Any help will be appreciated.

$('a.app1-preview').click(function() {
                    $(this).addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

My HTML code is:

    <div class="app-container">
                    <ul class="apps">
                      <li class="app1"> 
                          <a title href="#" class="app1-preview blocklink">
                                <span>ANOTHER<br /> APP</span>
                          </a> 
                      </li>
</ul></div>

My CSS is:

.app-container ul.apps li.app1 { border-color:#57b6dd; background:url(app-icons/app1.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1:hover { background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#57b6dd;}
.app-container ul.apps li.app1 a { color: #57b6dd; }
.app-container ul.apps li.app1-inactive { border-color:#b2b2b2; background:url(app-icons/app1-inactive.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1-inactive:hover { background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#b2b2b2;}
.app-container ul.apps li.app1-inactive a { color: #b2b2b2; }

Answer 1

There is no class named hover in your css, so make it like this instead:

.hover { 
    background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#b2b2b2;
} 

Answer 2

:hover works only on the mouse over. adding a class hover wont assign the :hover class to the element.

the alternative way could be to change the :hover to .hover

Answer 3

Add a second CSS selector to your hover CSS:

.app-container ul.apps li.app1:hover,
.app-container ul.apps li.app1-hover
{
    background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#57b6dd;
}

Now do where you need it:

$(this).addClass('app1-hover');

You'll get the same styling as your hover and you'll also preserve your hover CSS.

Answer 4

There is no hover class in your css. Add a class hover & then add it using jquery. Add this to your css:

a.app1-preview.hover { 
 background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px;
 color: #fff; border-color:#57b6dd;
}

demo fiddle: http://jsfiddle.net/kKX86/1/

Answer 5

You should be able to trigger mouseenter on the element, and have the style displayed:

$('a.app1-preview').click(function() {
                    $(this).trigger('mouseenter');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

Answer 6

Your setting hover class to your a tag instead of your li element.

So try this:

$('a.app1-preview').click(function() {
                    $(this).parent().addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

And you should add, if not already exists, a hover class named hover to your css declarations.