.hover()

Seçilen elemanlara mouse işaretçisi girdiğinde ve çıktığında çalışacak bir ya da iki olay işleyici bağlar.

İçindekiler :

.hover( handlerIn, handlerOut ) Dönen Değer : jQuery Nesnesi
Kaldırıldığı Versiyon: 3.3 Açıklama : Seçilen elemanlara mouse işaretçisi girdiğinde ve çıktığında çalışacak bir ya da iki olay işleyici bağlar.

.hover( handlerIn, handlerOut ) Eklendiği Versiyon 1.0
handlerIn
Tip : Fonksiyon( Olay eventObject )
Mouse işaretçisi elemana girdiğinde çalıştırılacak olan fonksiyon.
handlerOut
Tip : Fonksiyon( Olay eventObject )
Mouse işaretçisi elemanı terkettiğinde çalıştırılacak olan fonksiyon.

Bu API kaldırıldı yerine .on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut ) kullanınız.

.hover() metodu hem mouseenter hem mouseleave olaylarına olay işleyiciler bağlar. Mouse işaretçisi elemanın üzerindeyken yapılacakları işlemek için kullanabilirsiniz.

$( selector ).hover( handlerIn, handlerOut ) komutu şunun kısa yoludur:

$( selector ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );

Daha fazla ayrıntı için mouseenter ve mouseleave olaylarına bakınız.



Örnekler:

Liste elemanlarına üzerlerine gelinince başka stil uygula.

<style>
   ul {
      margin-left: 20px;
      color: blue;
   }
   li { cursor: default; }
   span { color: red; }
</style>

<ul>
   <li>Süt</li>
   <li>Ekmek</li>
   <li class="xfade">Layz</li>
   <li class="xfade">Çorap</li>
</ul>

<script>
   $( "li" ).hover(
      function() {
         $( this ).append( $( "<span> ***</span>" ) );
      }, function() {
         $( this ).find( "span" ).last().remove();
      }
   );
   
   $( "li.xfade" ).hover(function() {
      $( this ).fadeOut( 100 );
      $( this ).fadeIn( 500 );
   });
</script>
  • Süt
  • Ekmek
  • Layz
  • Çorap

Tablo hücrelerine üzerlerinde mouse gezerken class değeri ekle-çıkart.

$( "td" ).hover(
   function() {
      $( this ).addClass( "hover" );
   }, function() {
      $( this ).removeClass( "hover" );
   }
);

Bu olay işleyicileri kaldırmak için.

$( "td" ).off( "mouseenter mouseleave" );

.hover( handlerInOut ) Dönen Değer : jQuery Nesnesi
Kaldırıldığı Versiyon: 3.3 Açıklama : Seçilen elemanlara mouse işaretçisi girdiğinde ve çıktığında çalışacak tek bir olay işleyici bağlar.

.hover( handlerInOut ) Eklendiği Versiyon 1.4
handlerInOut
Tip : Fonksiyon( Olay eventObject )
Mouse işaretçisi elemana girdiğinde ve ayrıldığında çalıştırılacak olan fonksiyon.

Bu API kaldırıldı yerine .on( "mouseenter mouseleave", handlerInOut ) kullanınız.

.hover() metodu tek bir olay işleyici ile verilirse hem mouseenter hem mouseleave olaylarında çalışır. JQuery kullanıcıları event.type değerini kullanarak aynı fonksiyon içinde farklı işler yapabilir.

$( selector ).hover( handlerInOut ) komutu şunun kısa yoludur:

$( selector ).on( "mouseenter mouseleave", handlerInOut );

Daha fazla ayrıntı için mouseenter ve mouseleave olaylarına bakınız.



Örnekler:

Tek index'li liste elemanlarını gizle , çift index'li elemanların üzerine mouse gelince slide ederek göster.

<style>
    ul {
      margin-left: 20px;
      color: blue;
   }
    li { cursor: default; }
    li.active {
      background: black;
      color: white;
   }
    span { color:red; }
</style>

<ul>
   <li>Süt</li>
   <li>Beyaz</li>
   <li>Havuç</li>
   <li>Turuncu</li>
   <li>Brokoli</li>
   <li>Yeşil</li>
</ul>

<script>
   $( "li" ).odd().hide()
      .end().even().hover(function() {
         $( this ).toggleClass( "active" )
            .next().stop( true, true )
            .slideToggle();
      });
</script>
  • Süt
  • Beyaz
  • Havuç
  • Turuncu
  • Brokoli
  • Yeşil

.

.