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

For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a

javascript function,how to do that job?

EDIT: and how to change the background color of div when mouse is on?

EDIT AGAIN:how to make the first span's width=120px?Seems not working in firefox

Hank
  • 3,603
  • 2
  • 17
  • 19
omg
  • 136,412
  • 142
  • 288
  • 348
  • 1
    why don't you use an a-tag for the link? If you set display:block for the a-tag it behaves like the div. This solution would be more semantically. You still can add the event listener from the answers below on the a-tag. – Reeno Sep 03 '13 at 11:44

9 Answers9

69

Give it an ID like "something", then:

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

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

Changing the background color (as per your updated question):

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
James
  • 109,676
  • 31
  • 162
  • 175
34

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

is the simplest thing that works.

Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general.

macbirdie
  • 16,086
  • 6
  • 47
  • 54
11

The simplest of them all:

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
Bouramas
  • 1,077
  • 1
  • 17
  • 36
8

I suggest to use jQuery:

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
Liu Peng
  • 1,226
  • 2
  • 11
  • 13
  • 1
    As has been posted in a comment above; why use a framework for such a simple thing? – Jesper Haug Karsrud Jun 29 '09 at 11:01
  • 1
    If there are many simple things in your project, I think a good framework can save a great deal of time. If you want a javascript framework, jQuery is a best option :) – Liu Peng Jul 01 '09 at 01:42
5

I suggest to use a CSS class called clickbox and activate it with jQuery:

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

Now the only thing you have to do is mark your div as clickable and provide a link:

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

Plus a CSS style to change the mouse cursor:

.clickbox {
    cursor: pointer;
}

Easy, isn't it?

cldrr
  • 1,238
  • 14
  • 22
3

add the onclick attribute

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

To get the cursor to change use css's cursor rule.

div[onclick] {
  cursor: pointer;
}

The selector uses an attribute selector which does not work in some versions of IE. If you want to support those versions, add a class to your div.

Bjorn
  • 69,215
  • 39
  • 136
  • 164
2

As you updated your question, here's an obtrustive example:

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

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
alexn
  • 57,867
  • 14
  • 111
  • 145
2
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

This will change the background color as well

Rakesh Juyal
  • 35,919
  • 68
  • 173
  • 214
1

If this div is a function I suggest use cursor:pointer in your style like style="cursor:pointer" and can use onclick function.

like this

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

but I suggest you use a JS framework like jquery or extjs

scunliffe
  • 62,582
  • 25
  • 126
  • 161
pedrofernandes
  • 16,354
  • 10
  • 36
  • 43
  • 1
    Why should he/she use an entire framework for something so simple!?!? – James Jun 29 '09 at 09:45
  • 2
    cursor:hand is no good on browsers other than IE. cursor:pointer is the cross browser way of doing "the hand" – Dan F Jun 29 '09 at 09:46