Interagir avec HTML sur mouseenter et mouseleave

Question

Here est mon code; J'essaie de rendre le bouton noir lorsque survolé.

Mon jQuery actuelle (encore une fois, je ne sais pas beaucoup encore à apprendre):

$(document).ready(function() { 
    $('div').mouseenter(function() { 
     $('div').fadeTo('fast', 1); 
    }); 
    $('div').mouseleave(function() { 
     $('div').fadeTo('fast', 0.5); 
    }); 
}); 

Answer 1

Dans le menu latéral gauche vous avez une option Chose Framework, vous devez ajouter jQuery, et vous avez oublié de le faire.

demo

Answer 2

Le problème dans le jsFiddle est que vous n'avez pas inclus jquery du côté gauche ..

également à l'intérieur du gestionnaire d'événements, vous pouvez utiliser this pour cibler l'élément spécifique au lieu d'utiliser $('div') qui va cibler tous les divs dans la page.

$(document).ready(function() { 
    $('div').mouseenter(function() { 
     $(this).fadeTo('fast', 1); 
    }); 
    $('div').mouseleave(function() { 
     $(this).fadeTo('fast', 0.5); 
    }); 
}); 

---

Vous pouvez cependant faire la même chose sans utiliser javascript/jquery .. mais juste avec des transitions CSS

div { 
    opacity:0.5; 
    border-radius:5px; 
    width:20%; 
    height:100%; 
    background-color:black; 
    text-align:center; 
    border-color:blue; 
    float:left; 
    color:#FFFFFF; 

    transition:opacity 1s; /*added this to enable transitions on opacity of divs*/ 
} 
div:hover{ 
    opacity:1; 
} 

Démo à http://jsfiddle.net/gaby/DnNkk/2/