Question

我正在尝试实现一个褪色的导航系统，其中导航系统中的所有内容，但悬停的元素将淡出，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");
});

});

class / css（less）：

.inactive {颜色：@ COLOR2; border-bottom：0 solid＃000;}

。主动{颜色：@ COLOR1; border-bottom：1px solid＃000;}

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

基本上悬停状态优先于点击，我不想发生这种情况。

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

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

默认状态：不透明度1

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

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

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

我希望能让它更加清晰，为原来的解释道歉。

Answer 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/

Answer 2

使用mouseout和mouseover，然后在您设置所需项目类别的情况下指定您想要发生的事情。

示例：

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

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

淡出一切，但（这） - 同时尊重点击（）

2 个答案: