come rendere div-click-able?

Question

<div><span>shanghai</span><span>male</span></div> 

Per div come sopra, quando il mouse sopra, dovrebbe diventare cursor: pointer, e quando si fa clic, sparare un funzione javascript

, come fare quel lavoro?

MODIFICA: e come modificare il colore di sfondo di div quando il mouse è acceso?

modificare nuovamente: come rendere la larghezza del primo arco = 120px Sembra non funziona con Firefox

Answer 1

Dategli un ID come "qualcosa", quindi:

var something = document.getElementById('something'); 

something.style.cursor = 'pointer'; 
something.onclick = function() { 
    // do something... 
}; 

Cambiare lo sfondo colore (come per la tua domanda aggiornata):

something.onmouseover = function() { 
    this.style.backgroundColor = 'red'; 
}; 
something.onmouseout = function() { 
    this.style.backgroundColor = ''; 
}; 

Answer 2

aggiungere l'attributo onclick

<div onclick="myFunction(event);"><span>shanghai</span><span>male</span></div> 

Per ottenere il cursore per cambiare l'uso css's cursor rule.

div[onclick] { 
    cursor: pointer; 
} 

Il selettore utilizza un selettore di attributo che non funziona in alcune versioni di IE. Se vuoi supportare quelle versioni, aggiungi una classe al tuo div.

Answer 3

<div style="cursor: pointer;" onclick="theFunction()">

è la cosa più semplice che funziona.

Ovviamente nella soluzione finale è necessario separare il markup da styling (css) e behavior (javascript) - leggere su di esso on a list apart per le buone pratiche non solo sulla risoluzione di questo particolare problema, ma nel design del markup in generale.

Answer 4

Se questa div è una funzione, suggerisco di utilizzare il cursore: puntatore nel proprio stile come style = "cursor: pointer" e può utilizzare la funzione onclick.

come questo

<div onclick="myfunction()" style="cursor:pointer"></div> 

ma vi suggerisco di utilizzare un framework JS come jquery o extjs

Answer 5

Come hai aggiornato la tua domanda, ecco un esempio obtrustive:

window.onload = function() 
{ 
    var div = document.getElementById("mydiv"); 

    div.style.cursor = 'pointer'; 
    div.onmouseover = function() 
    { 
     div.style.background = "#ff00ff"; 
    }; 
} 

Answer 6

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div> 

Questo cambierà il colore di sfondo e

Answer 7

Suggerisco di usare jQuery:

$('#mydiv') 
    .css('cursor', 'pointer') 
    .click(
    function(){ 
    alert('Click event is fired'); 
    } 
) 
    .hover(
    function(){ 
     $(this).css('background', '#ff00ff'); 
    }, 
    function(){ 
     $(this).css('background', ''); 
    } 
); 

Answer 8

Suggerisco di utilizzare una classe CSS chiamata clickbox e attivarla con jQuery:

$(".clickbox").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
}); 

Ora l'unica cosa che dovete fare è contrassegnare la div come cliccabile e fornire un collegamento:

<div id="logo" class="clickbox"><a href="index.php"></a></div> 

Inoltre uno stile CSS per modificare il cursore del mouse:

.clickbox { 
    cursor: pointer; 
} 

Facile non è vero?