jQuery悬停更改排序选项上的箭头

Question

我在我的网站上开发了一种用各种排序选项排序div（.ligne）的方法。按名称，按日期，按状态和按类型排序。我有一个运行良好的jQuery代码。当点击排序选项箭头方向改变（ASC/DSC）时，一切都很完美。

现在我想在鼠标悬停的情况下选择一个排序选项（那些不是活动的）来使箭头出现（ASC），并且当mouseout使它消失时。它尝试了一些工作，但不好...

例如，当鼠标悬停在YEAR上，当我的div按“PROJECTS”排序时，向下箭头出现，鼠标消失时消失。没关系。然后当点击“YEAR”按“YEAR”排序时，我的箭头出现并停留。没关系。但当我再次点击，然后我的div按相反的顺序排序，并出现向上箭头，但是当我再次将鼠标移动到“YEAR”时，我的箭头出现了......这是我的所有排序选项的问题.. 。

这里是没有鼠标悬停及移出问题的jsfiddle只是让你了解我到目前为止已经取得的成就：

http://jsfiddle.net/C2heg/813/

，这里是jQuery代码我工作的mouseover和mouseout：

/* VILLE */ 

$('#projet').mouseover(function() { 
if (flag_ville == 0) { 
     $("#nom_ASC").show(); 
} 
}); 

$('#projet').mouseout(function() { 
if (flag_ville == 0) { 
     $("#nom_ASC").hide(); 
} 
}); 

/* ANNEE */ 

$('#annee').mouseover(function() { 
if (flag_annee == 0) { 
     $("#annee_ASC").show(); 
} 
}); 

$('#annee').mouseout(function() { 
if (flag_annee == 0) { 
     $("#annee_ASC").hide(); 
} 
}); 

/* STATUT */ 

$('#statut').mouseover(function() { 
if (flag_statut == 0) { 
     $("#statut_ASC").show(); 
} 
}); 

$('#statut').mouseout(function() { 
if (flag_statut == 0) { 
     $("#statut_ASC").hide(); 
} 
}); 

/* TYPE */ 

$('#type').mouseover(function() { 
if (flag_type == 0) { 
     $("#type_ASC").show(); 
} 
}); 

$('#type').mouseout(function() { 
if (flag_type == 0) { 
     $("#type_ASC").hide(); 
} 
}); 

以及与此代码的jsfiddle补充说：

http://jsfiddle.net/C2heg/814/

我使用标志为我的代码的第一部分，这就是为什么我试图使用他们的第二部分，但它不工作，和我找不到解决方案...

任何人都可以帮助我吗？

谢谢

Answer 1

为什么使用Javascript？你可以用CSS来完成。

相反的：

<div class="col-xs-3 text-right" id="projet"> 
    <div class="title">PROJECT</div> 
    <span id="nom_ASC" class="sort">&#8595;</span> 
    <span id="nom_DSC" class="sort">&#8593;</span> 
</div> 

你可以尝试：

<div class="col-xs-3 title" id="projet"> 
    PROJECT 
    <span id="nom_ASC" class="sort">&#8595;</span> 
    <span id="nom_DSC" class="sort">&#8593;</span> 
</div> 

和：

div.title > span { 
    display: none; 
    position: absolute; 
    top: whatever you want px; 
    right: whatever you want px; 
} 

div.title:hover > span { 
    display: block; 
} 

编辑：

我与我的主张更新您的jsfiddle：http://jsfiddle.net/C2heg/818/ 使用CSS类而不是标志，它更清晰。

或者，也许你会更喜欢一个：http://jsfiddle.net/C2heg/817/