Shortcut Hover and Press KEy

by Semih Muyaoğlu

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row mb-3 mt-3">
    <div class="col-md-12 text-center">
      Müşteri Detay <span class="badge badge-success">Z</span> - Sipariş Detay <span class="badge badge-warning">X</span> - Kredi Kartı Detay <span class="badge badge-danger">C</span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">

      <ul class="list-group">
        <li class="list-group-item" id="1">Satır 1</li>
        <li class="list-group-item" id="2">Satır 2</li>
        <li class="list-group-item" id="3">Satır 3</li>
        <li class="list-group-item" id="4">Satır 4</li>
        <li class="list-group-item" id="5">Satır 5</li>
      </ul>

    </div>
  </div>

  <div class="row mt-3">

    <div class="col-md-12">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>İşlem : </strong> <span class="sonuc"></span>
      </div>
    </div>
  </div>

</div>

CSS

.list-group-item {
  background: #fff;
}

.list-group-item:hover {
  background: #efefef;
}

JavaScript

zxccvar deger;

$(".list-group").focus();

$('.list-group-item').mouseover(function(e) {
  deger = this.id;
}).mouseleave(function() {
  deger = null;
});


$("body").keypress(function(e) {
  //alert(e.keyCode);
  if (e.keyCode == '99') {
		$('.sonuc').html("Satır "+ deger +" öğesi için  Kredi Kartı Detayı göster")
  } else if (e.keyCode == '120') {
    $('.sonuc').html("Satır "+ deger +" öğesi için  Müşteri Detayı göster")
  } else if (e.keyCode == '122') {
    $('.sonuc').html("Satır "+ deger +" öğesi için  Sipariş Detayı göster")
  }
});