2013-05-29 16 views
14

Cercando di cambiare il colore del bordo su una scatola ..Procedura: aggiungere/rimuovere la classe su mouseOver/mouseOut - JQuery .hover?

..quando l'utente sposta il mouse sopra/fuori ..

Ecco il codice tentato .. esigenze di lavoro!

JQuery:

<script> 
$("result").hover(
    function() { 
    $(this).addClass("result_hover"); 
    }, 
    function() { 
    $(this).removeClass("result_hover"); 
    } 
); 
</script> 

CSS3:

<style> 
    .result { 
    height: 72px; 
    width: 100%; 
    border: 1px solid #000; 
    } 
    .result_hover { 
    border: 1px solid #fff; 
    } 
</style> 

HTML5:

<div class="result"> 
    <div class="item"> 
    <div id="item1"> 
     <i class="icon"></i>&nbsp;## 
    </div> 
    </div> 
<div> 

Grazie per la ricerca

risposta

48

Dimenticato la dot di class selector di conseguenza c lass.

Live Demo

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

È possibile utilizzare toggleClass su hover evento

Live Demo

$(".result").hover(function() { 
    $(this).toggleClass("result_hover"); 
}); 
8

si potrebbe utilizzare: {dentro e fuori funzione di callback}

$(".result").hover(function() { 
    $(this).toggleClass("result_hover"); 
}); 

Per esempio, meglio sarà per usare i CSS pseudo classe :hover: {no js/jquery bisogno}

.result { 
    height: 72px; 
    width: 100%; 
    border: 1px solid #000; 
    } 
    .result:hover { 
    background-color: #000; 
    } 
1

Ti manca il punto sul selettore, ed è possibile utilizzare il metodo toggleClass on jquery:

$(".result").hover(
    function() { 
    $(this).toggleClass("result_hover")  
    } 
); 
2

vostro selettore manca un . e anche se dici che vuoi per cambiare il border-color - si sta aggiunta e la rimozione di una classe che imposta la background-color

+0

Buona cattura .. Codice vecchio acquisito .. Aggiornato – sourcingsynergy