¿Cómo hacer que haga clic en div?

Question

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

Para div como arriba, cuando el mouse está activado, debería convertirse en cursor: puntero, y cuando se hace clic, dispara un

función javascript, ¿cómo hacer ese trabajo?

EDITAR : ¿y cómo cambiar el color de fondo de div cuando el mouse está encendido?

EDITAR DE NUEVO : ¿cómo hacer que el ancho del primer tramo = 120px? Parece que no funciona en Firefox

Answer 1

Déle una identificación como " algo " ;, luego:

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

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

Cambiar el color de fondo (según su pregunta actualizada):

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

Answer 2

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

es lo más simple que funciona.

Por supuesto, en la solución final, debe separar el marcado del estilo (css) y el comportamiento (javascript); lea en él en una lista aparte para buenas prácticas no solo para resolver este problema en particular sino también en el diseño de marcado en general.

Answer 3

Sugiero usar jQuery:

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

Answer 4

Sugiero usar una clase CSS llamada clickbox y activarla con jQuery:

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

Ahora lo único que tiene que hacer es marcar su div como cliqueable y proporcionar un enlace:

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

Además de un estilo CSS para cambiar el cursor del mouse:

.clickbox {
    cursor: pointer;
}

Fácil, ¿no?

Answer 5

agregue el atributo onclick

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

Para cambiar el cursor, use regla del cursor de css .

div[onclick] {
  cursor: pointer;
}

El selector utiliza un selector de atributos que no funciona en algunas versiones de IE. Si desea admitir esas versiones, agregue una clase a su div.

Answer 6

Cuando actualizó su pregunta, aquí hay un ejemplo obvio:

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

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

Answer 7

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

Esto también cambiará el color de fondo

Answer 8

El más simple de todos:

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>

Answer 9

Si este div es una función, sugiero usar cursor: puntero en su estilo como style = " cursor: pointer " y puede usar la función onclick.

como este

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

pero le sugiero que use un marco JS como jquery o extjs