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

Mahmoud Gamal · Accepted Answer · 2012-06-18 10:35:24Z

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

answered Jun 18, 2012 at 10:35

Mahmoud Gamal

80.2k18 gold badges143 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2012-06-18 10:35:46Z

1

: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

answered Jun 18, 2012 at 10:35

Chris

17410 bronze badges

Comments

Jon · Accepted Answer · 2012-06-18 10:37:42Z

1

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.

answered Jun 18, 2012 at 10:37

Jon

3,2134 gold badges43 silver badges66 bronze badges

Comments

SVS · Accepted Answer · 2012-06-18 10:38:38Z

1

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/

answered Jun 18, 2012 at 10:38

SVS

4,2651 gold badge25 silver badges28 bronze badges

Comments

micadelli · Accepted Answer · 2012-06-18 10:35:59Z

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.

Klaus Byskov Pedersen · Accepted Answer · 2012-06-18 10:35:57Z

0

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");

            });        
        });

answered Jun 18, 2012 at 10:35

Klaus Byskov Pedersen

122k31 gold badges192 silver badges223 bronze badges

Collectives™ on Stack Overflow

changing style to that of hover using css and jquery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Related