dice che ho un div con i seguenti attributi:Evidenzia sulla hover
.box {
width: 300px;
height: 67px;
margin-bottom: 15px;
}
Come dovrei fare in modo che se qualcuno si libra il mouse sopra questa zona, cambia lo sfondo di un colore leggermente più scuro e lo rende un'area cliccabile? Solo
CSS:
.box:hover{
background: blue; /* make this whatever you want */
}
di farne una zona 'cliccabile', si sta andando a voler mettere un tag <a></a> all'interno del div, e si può decidere di utilizzare jQuery per impostare il Attributo href.
jQuery Soluzione
$('.box').hover(function(){
$(this).css("background", "blue");
$(this).find("a").attr("href", "www.google.com");
});
Una terza soluzione: si potrebbe cambiare il cursore, e anche dargli un evento click utilizzando jQuery:
$('.box').click(function(){
// do stuff
});
Utilizzare il sopra con il seguente CSS:
.box{
background: blue;
cursor: pointer;
}
si può fare con i CSS solo:
.box:hover{
background: blue;
cursor: pointer;
}
O con JavaScript (sto usando jQuery in questo esempio)
;(function($){
$('.box').bind('hover', function(e) {
$(this).css('background', 'blue');
});
})(jQuery);
.box:hover {
background: #999;
cursor: pointer;
}
Quando si passa le modifiche di sfondo al colore vuoi e il cursore diventa puntatore. È possibile attivare un evento con jQuery in questo modo:
$('.box').click(customFunction);
Collegamento di un div ha funzionato per me semplicemente avvolgendolo in un un tag. Ecco un esempio di seguito con le classi Bootstrap:
<a href="#">
<div class="col-md-4">
<span class="glyphicon glyphicon-send headericon"></span>
<p class="headerlabel">SEND</p>
<p class="headerdescription">Send candidate survey</p>
</div>
</a>
Per cambiare il colore div al passaggio del mouse aggiuntivo:
div:hover {
background-color: rgba(255,255,255,0.5);
}
al vostro CSS :)
E se volevo avere un bordo quando si passa sopra il div di 5px tutto intorno senza rovinare il posizionamento delle cose intorno ad esso? – ShadyPotato
@ShadyPotato Se si aggiunge un bordo, verrà aggiunto alla larghezza degli elementi. Dovrai tenerne conto. –
Quindi dire che ho il div 300px x 67px e ci sono gli stessi div al di sopra e al di sotto di questo div. Come farei in modo che se si passasse il mouse sopra il div, lo si evidenziava come suggerito, ma lo si evidenziava di 5px più grande della dimensione div? – ShadyPotato