Probleem jquery in verband met div

Hallo, ik heb een webpagina met 3 divs (kaders) van 60px width, maar ik zou die moeten kunnen vergroten naar 100px als ik er met de muis over ga door te werken met de width functie, maar ik weet niet of dit correct is? (in de div is ingesteld width: 60px) Het 2de punt de kaders moeten hun gewone (60px) terug aannemen van zodra ik er buiten ga met mijn muis.

$( “div” ).on( “mouseover”, function() {
$( this ).css({
width: function( index, value ) {
return parseFloat( value ) * 2;
}
});
});

Samengevat: mijn kaders wil ik breder maken (100px) als ik met muis erover ga, maar als ik buiten de kaders zit met de muis moeten de kaders terug hun vorig formaat aannemen (60px).

Je kan de mouseout functie gebruiken.
Zo zet je de waarde op 60 pixels als je met de muis uit het div gaat.

Maar ik denk dat je dit beter met CSS kunt oplossen.
Zoiets?

div {
width: 60px;
}

div:hover {
width: 100px;
}

Linkje naar voorbeeld van de jquery

Ok, bedankt dat werkt!

Ik heb 3 divs met alle drie een andere kleur (Blauw, groen, Rood)

Nu zou ik graag als ik op een div klik, in de console het volgende willen zien staan:

event type is :click

Target is: [object HTMLDivElement]

target html is: Blauw

(de target html moet zich aanpassen, afhankelijk of ik op blauw, groen of rood klik)

<style>
div {
margin: 10px;
padding: 12px;
border:2px solid #666;
width: 60px;
}

  &lt;/style&gt;

</head>
<body>

&lt;div style="Background-color: #0000FF" target="Blauw"&gt;
  Blauw&lt;/div&gt; 
&lt;div style="Background-color: #04B404" target="Groen"&gt; 
 Groen
 &lt;/div&gt;
&lt;div style="Background-color: #DF0101" target="Rood"&gt;
  Rood
  &lt;/div&gt;   



&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
	$(document).ready(function(){
    $('div')
       .click (function(){ 
         console.log('Event type is: click');
       })
       .click(function (){
           console.log(target);
       })
       .click(function (){
         console.log ('target html is:Groen')

       })       

});
</script>