Question

你能否告诉我如何在鼠标悬停时选择项目索引..我有一个列表，当我鼠标悬停在列表上时我添加了悬停类。但是我需要选择的项目。

这是我的代码

 $(function(){
 $('#main-menu').on({
                mouseenter: function () {
                console.log("mouse over")    
                },
                mouseleave: function () {
                  console.log("mouse leave")    
                }
            });

 })

当我将鼠标悬停在 B 上时，它会给我1，当我悬停c时，它会给我2

Answer 1

使用index()并将选择器移至<li>

$('#main-menu li').on({
    mouseenter: function() {
      console.log("over index " + $(this).index())
    },
    mouseleave: function() {
      console.log("leave index " + $(this).index())
    }
});

Answer 2

试试这个JS;）

$（函数（）{
$（'＃main-menu li'）。on（{
mouseenter：function（）{
警报（$（this）.index（））;
}，
}）;
}）

Answer 3

您可以将mouseenter和mouseleave事件绑定到列表项。通过这种方式，$(this)将包含您需要的信息，并使用jQuery index函数获取其索引：

$(function() {
  $('#main-menu li').on({
    mouseenter: function() {
      console.log("mouse over: " + $(this).index())
    },
    mouseleave: function() {
      console.log("mouse leave: " + $(this).index())
    }
  });
})

#main-menu ul li:hover {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu">
  <section>
    <ul>
      <li>
        <a>a</a>
      </li>
      <li>
        <a>b</a>
      </li>
      <li>
        <a>c</a>
      </li>
    </ul>
  </section>
</div>

Answer 4

使用CSS属性counter没有JS，请查看演示。

Fiddle

<强>段

＆＃13;

li {
  font: 400 16px/1.5 'Consolas';
  text-decoration: none;
  list-style: none;
  cursor:pointer;
  text-align: center;
  padding: 0 1ex;
  margin: 0 0 0 2ex;
}

li:before {
  opacity: 0;
}

li:hover:before {
  content: idx;
  opacity: 1;
  background-color: black;
  color: yellow;
  padding: 0 1ex;
  text-align: left;
  margin: 0 2ex 0 0;
}

li:hover {
  background: yellow;
  color: black;
}

ul {
  counter-reset: idx -1;
}

li:before {
  counter-increment: idx;
  content: counter(idx);
}

＆＃13;

<div id="main-menu">
  <section>
    <ul>
      <li>
        <a>A</a>
      </li>
      <li>
        <a>B</a>
      </li>
      <li>
        <a>C</a>
      </li>
            <li>
        <a>D</a>
      </li>
      <li>
        <a>E</a>
      </li>
      <li>
        <a>F</a>
      </li>
            <li>
        <a>G</a>
      </li>
      <li>
        <a>H</a>
      </li>
      <li>
        <a>I</a>
      </li>
    </ul>

  </section>
</div>

＆＃13;

如何在鼠标悬停时获取选定的索引？

4 个答案: