0

我正在完成一个网站，其中部分代码由未完成工作的自由职业者完成。我已经解决了几乎所有问题，但我被困在这个问题上。

测试地点在这里。

我希望顶部的按钮（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 按钮保持白色，但如果我们再次将鼠标悬停在它上面，白色就会消失。

4

2 回答 2

1

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

于 2012-06-13T14:11:27.587 回答
0

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

它会在鼠标移出时淡出元素，除非该特定元素具有活动类。您的站点不会将活动类应用于语言链接......它将活动类应用于<li>容器。

于 2012-06-13T15:47:31.767 回答