淡出除 (this) 之外的所有内容 - 同时尊重 click()答案

【问题标题】：Fading out everything but (this) - while honoring a click()淡出除 (this) 之外的所有内容 - 同时尊重 click()
【发布时间】：2012-06-19 03:04:33
【问题描述】：

我正在尝试实现一个淡入淡出的导航系统，其中导航中的所有内容，但被悬停的元素都会淡出，例如 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(less)：

.inactive{颜色:@color2; border-bottom:0 solid #000;}

.active{color:@color1; border-bottom:1px solid #000;}

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

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

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

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

默认状态：不透明度 1

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

点击（活动）状态：不透明度 1（其他链接不会覆盖点击元素上的不透明度）。

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

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

【问题讨论】：

标签： jquery nav fading

【解决方案1】：

为什么要用 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/

【讨论】：

我对此唯一真正的问题（这是具有不透明度更改的 jsFiddle）是它的“默认”状态，不透明度为 0.3。基本上我希望它是：默认 - 1 不透明度悬停 - 0.3 不透明度（除了被悬停的元素）单击 - 1 不透明度从容器中鼠标移出 - 1 不透明度所以我几乎知道我想要什么（不是我们所有人），我只是不知道如何将它翻译成工作 jquery 代码。
那条评论没有按照我的预期出现，抱歉。我将编辑主帖以使其更清晰。

【解决方案2】：

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

例子：

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

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

【讨论】：