0

我正在尝试实现一个淡入淡出的导航系统，其中导航中的所有内容，但被悬停的元素都会淡出说，0.3 不透明度。

同时，我希望点击具有更大的“价值”，以免被点击的元素（或者在这种情况下，活动子页面）淡出。这对我来说也没有多大意义，我'我只是发布我的代码。

    <nav id="main">
        <ul>
            <li>
                <a>work</a>
            </li>
            <li>
                <a>about me</a>
            </li>
            <li>
                <a>contact</a>
            </li>           
        </ul>
    </nav>

让它闪闪发光的脚本：

var nava = "nav#main ul li a";

$(nava).hover(function(){
    $(nava).not(this).removeClass().addClass("inactive");
    $(this).addClass("active");
});

$(nava).click(function(){
    $(this).removeClass().addClass("active");
});

});

和类/ css（少）：

.inactive{颜色：@color2; 边框底部：0 固体 #000;}

.active{颜色：@color1; 边框底部：1px 实心#000;}

nav#main ul li a{color:@color1;}

基本上，悬停状态优先于点击，这是我不希望发生的。

理想情况下，只要您将鼠标悬停在包含所有锚元素的无序列表中，我希望所有锚元素都恢复到其原始状态。如果有人对此有一些指示，将不胜感激。干杯!

编辑：回应 Christian Varga - 我明白你的意思，但我想做的是以下内容。

默认状态：不透明度 1

悬停状态：不透明度 0.3（在除悬停元素之外的所有内容上，悬停元素仍处于不透明度 1）

Clicked(Active) State : Opacity 1（其他链接不覆盖单击元素上的所述不透明度）。

Mouseout(From Container)：所有内容的不透明度为 1，除非已单击链接（处于活动状态）。

我希望这使它更清楚一点，对最初的解释表示歉意。

4

2 回答 2

0

为什么要用 jQuery 绑定悬停？这就是 CSS 的用途:)。尝试这样的事情：

js：

var nava = 'nav#main ul li a';

$(nava).click(function() {
    $(nava).removeClass('active')
    $(this).addClass('active');
});

CSS：

nav#main ul li a{color:#00ff00;}
nav#main ul li a:hover{color:#00ff00; border-bottom:1px solid #000;}
nav#main ul li a.active{color:#ff0000; border-bottom:0 solid #000;}

jsFiddle：http: //jsfiddle.net/Z2KMB/

还有一个带有不透明度变化的 jsFiddle：http: //jsfiddle.net/Z2KMB/1/

于 2012-06-19T03:13:46.933 回答
0

使用 mouseout 和 mouseover 然后指定你想要在你的情况下发生什么设置你想要的项目的类。

例子：

$("div.class").mouseout(function(){
      $("#control_name").removeClass("class_name");
    }).mouseover(function(){
      $("#control_name").addClass("other_class_name");
    });

显然你知道如何根据 id 的类名和类型等来命名。上面只是一个例子。

于 2012-06-19T03:15:18.613 回答