como fazer div clique com o poder?

Question

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

Para div como acima, quando mouse sobre, deve tornar-se cursor: ponteiro, e quando clicado, o fogo

função de javascript, como fazer esse trabalho?

Editar :? E como mudar a cor do div de fundo quando o mouse estiver sobre

EDIT novamente : como fazer o primeiro do período width = 120px Parece não funciona no firefox

Answer 1

Dê-lhe um ID como "algo", então:

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

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

Alterar a cor de fundo (como por sua pergunta atualizado):

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

Answer 2

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

é a coisa mais simples que funciona.

É claro que na solução final você deve separar a marcação de styling (css) e comportamento (javascript) - leia sobre ele em uma lista à parte para boas práticas sobre não apenas resolver este problema particular, mas em design de marcação em geral.

Answer 3

Eu sugiro 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

Eu sugiro usar uma classe CSS chamada Clickbox e ativá-lo com jQuery:

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

Agora, a única coisa que você tem a fazer é marcar a sua div como clicável e fornecer um link:

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

Além disso, um estilo CSS para mudar o cursor do mouse:

.clickbox {
    cursor: pointer;
}

Fácil, não é?

Answer 5

onclick atributo

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

Para obter o cursor para uso mudança de css regra cursor .

div[onclick] {
  cursor: pointer;
}

O seletor usa um seletor de atributo que não funciona em algumas versões do IE. Se você quiser apoiar essas versões, adicionar uma classe para o seu div.

Answer 6

Como você atualizou sua pergunta, aqui está um exemplo obtrustive:

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>

Isso vai mudar a cor do fundo também

Answer 8

O mais simples de todos eles:

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

Answer 9

Se esta div é uma função sugiro cursor use: ponteiro em seu estilo como style = "cursor: ponteiro" e pode usar onclick função

.

como este

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

mas eu sugiro que você use um quadro JS como jquery ou extjs