CODEWITHSUNDEEP
jqueryhtmlcss
user1038814
user1038814

Reputation: 9677

changing style to that of hover using css and jquery

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

Upvotes: 0

Views: 224

Answers (6)

SVS
SVS

Reputation: 4275

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/

Upvotes: 1

Jon
Jon

Reputation: 3213

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.

Upvotes: 1

micadelli
micadelli

Reputation: 2482

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.

Upvotes: 0

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 121057

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

            });        
        });

Upvotes: 0

Chris
Chris

Reputation: 174

: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

Upvotes: 1

Mahmoud Gamal
Mahmoud Gamal

Reputation: 79979

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

Upvotes: 1

Related Questions