CODEWITHSUNDEEP
javascriptjquery
user944513
user944513

Reputation: 12729

how to get selected index on mouseover?

could you please tell me how I will get selected Item index on mouseover ..I have a list , when I mouseover the list I added hover class .But I need the selected Item .

here is my code

https://jsfiddle.net/qp6ex1jh/

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

 })

when I hover on B it give me 1 and when I hover c it give me 2

Upvotes: 0

Views: 2770

Answers (4)

zer00ne
zer00ne

Reputation: 43920

Use the CSS property counter no JS, please review the demo.

Fiddle

Snippet

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);
}
<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>

Upvotes: 0

user3062282
user3062282

Reputation:

try this JS ;)

$(function(){
      $('#main-menu li').on({
               mouseenter: function () {
                    alert($(this).index()) ;
          },
     });
})

Upvotes: 1

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

You could bind the mouseenter and mouseleave events to the list items. In this way, $(this) will contain the piece of information you need and with jQuery index function you can obtain its 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>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Use index() and move selector to the <li>

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

Upvotes: 1

Related Questions