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

Question

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

现在我正在尝试将鼠标悬停在排序选项（未激活的选项）上以显示箭头（ASC），并在鼠标移出时使其消失。它尝试了一些可行但不好的方法...

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

这是一个没有鼠标悬停和鼠标悬停问题的 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/