淡出所有，但（此） - 虽然表示一个点击（）

我试图实现一个衰落的导航系统，在导航中的所有内容，但元素被盘旋将淡出说，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; border-bottom：0 solid＃000;}

.active {color：@ color1;底部边框：1px的固体＃000;}

导航＃主UL李一{颜色：@ COLOR1;}

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

理想情况下，我希望所有的锚元素都能够恢复到原来的状态，只要你将鼠标悬停在无序列表中就可以完成它。如果任何人有这方面的一些指针，将不胜感激。干杯！

编辑：为了回应克里斯蒂安瓦尔加 - 我明白了你的观点，但我想要做的是以下几点。

默认状态：不透明度1

徘徊状态：不透明度0.3（上一切，但悬停元素，悬停元素仍处于不透明1）

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

Mouseout（从容器）：不透明度1对所有东西，除非链接已被点击（活动）。

我希望能让它更清楚一点，为原始解释道歉。

来源

2012-06-19 Kasper Lewau

你为什么要用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-19 03:13:46

我唯一真正遇到的问题是（这是不透明度变化的jsFiddle），它是“默认”状态，不透明度为0.3。基本上我想它是：默认 - 1个不透明飞翔 - 0.3不透明（除正在徘徊的元素）点击 - 1不透明鼠标移开从容器 - 1个不透明所以我非常知道我想要什么（不要我们都），我只是不知道如何将它转换成工作的jQuery代码。 –

该评论没有按照我的意思表示道歉。我将编辑主题栏以使其更清晰。 –

使用鼠标移开和mouseover，然后指定你想要的在你的案例中设置你想要的物品的类。

例子：

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

显然，你知道如何命名基于ID的类名和类型的等等。以上只是一个例子。

来源

2012-06-19 03:15:18

淡出所有，但（此） - 虽然表示一个点击（）

回答

相关问题