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

Question

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

现在我正在尝试当鼠标悬停在排序选项(未激活的选项)上时出现箭头(ASC)，当鼠标移开时使它消失。它尝试了一些有效但效果不佳的方法......

例如，当鼠标悬停在 YEAR 上时，当我的 div 按“元素”排序时，会出现向下箭头，而当鼠标移开时，它会消失。没关系。然后当点击“YEAR”按“YEAR”排序时，我的向下箭头出现并停留。没关系。但是当我再次单击时，我的 div 以相反的顺序排序，并且出现向上箭头，但是当我再次将鼠标悬停在“YEAR”上时，我的向下箭头重新出现......这就是我所有排序选项的问题...... .

这是一个没有 mouseover 和 mouseout 问题的 jsfiddle，只是为了让你了解我到目前为止所取得的成就:

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

这是我正在处理的 mouseover 和 mouseout 的 jquery 代码:

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