CODEWITHSUNDEEP
hover
user1453771
user1453771

Reputation: 63

Remain at hover state when clicked

I'm finishing up a website with code partially done by a freelancer that didn't completed the job. I've solved almost all problems but i'm stuck at this one.

The test site is here.

I want the buttons at the top (PT-EN) to remain at their hover state (white) depending on what language site we're in. Much in the same way the navigation menu items remain white when selected.

Thanks in advance!

EDIT:

What i'm trying to do is basically duplicate what its done in navigation menus which is this:

HTML says:

<div class="fright text">
            <ul>
                <li class="active"><a href="baga.html">baga</a></li>
                <li><a href="portfolio_thumbnai.html"> portfolio</a></li>
            </ul>
            <ul>
                <li><a href="clientes.html">clientes</a></li>
                <li><a href="contactors.html"> contactos</a></li>
                <li><a href="news.html"> news</a></li>
            </ul>
        </div>

CSS says:

.head .text{
    text-transform:uppercase;
    padding-top: 72px;
    font-size: 25px;
    text-align:right;
    margin-right:-1px;
    line-height:26px;
}
.head .text ul{
    padding:0px;
    margin-top:-5px
}
.head .text ul li{
    display:inline;
}
.head .text ul li a{
    text-decoration:none;
    color: #fff;
    opacity: 0.3;
    font-family: DIN-Light;
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.head .text ul li.active a{
    color:#fff;
}

What's currently done for the top buttons is this:

HTML

<div class="top-head">
        <ul>
        <li class="active"><a href="#">pt</a></li>
        <li> - <a href="en/index.html">en</a></li>
        </ul>
        </div>

CSS

.top-head{
    text-align:right;
    text-transform:uppercase;
    padding-top:20px;
    font-size:11px;
    font-family: DIN-Light;
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.top-head ul li{
    display:inline;
}
.top-head ul li a{
    text-decoration:none;
    color: #fff;
    opacity: 0.3;
    font-family: DIN-Light;
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.top-head ul li.active a{
    color:#fff;
    opacity: 1;
}

The result is although the PT button stays white when we enter the page, if we hover on it again the white fades away.

Upvotes: 0

Views: 618

Answers (2)

Steve Buzonas
Steve Buzonas

Reputation: 5690

The problem is within your javascript:

$(".text-top a,.menu-div a,.top-head a,.blog ul li a,.mapa a, input[type=button],input[type=submit]").live("mouseout", function() {
    if(!$(this).hasClass('active')) {
        $(this).stop();
        $(this).animate({
            opacity: 0.3
        }); 
    }
});

It fades out the element on mouseout unless that specific element has the active class. Your site does not apply the active class to the language links... it applies the active class to the <li> container.

Upvotes: 0

user610217
user610217

Reputation:

You can change the class of button based upon a DOM event. Using my preferred jQuery, I'd recommend taking a look at this.

Upvotes: 1

Related Questions