Question

我正在完成一个网站，其代码部分是由一位没有完成工作的自由职业者完成的。我已经解决了几乎所有问题，但我仍然坚持这一点。

测试网站为here。

我希望顶部的按钮（PT-EN）保持悬停状态（白色），具体取决于我们所处的语言网站。选择时导航菜单项保持白色的方式大致相同。

提前致谢！

编辑：

我正在尝试做的基本上是复制它在导航菜单中的功能：

HTML说：

<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说：

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

目前为顶部按钮做的是：

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

结果是虽然当我们进入页面时PT按钮保持白色，但如果我们再次悬停在它上面，白色就会消失。

Answer 1

您可以根据DOM事件更改按钮类。使用我喜欢的jQuery，我建议你看一下this。

Answer 2

问题出在你的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
        }); 
    }
});

除非该特定元素具有活动类，否则它会淡出mouseout上的元素。您的网站不会将活动类应用于语言链接...它会将活动类应用于<li>容器。

单击时保持悬停状态

2 个答案: