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

1
  • 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
    Commented Sep 3, 2013 at 11:44

9 Answers 9

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 = '';
};
11
  • 5
    Remember to do this inside the window.onload-event.
    – alexn
    Commented Jun 29, 2009 at 9:56
  • 1
    Or, place the script somewhere beneath the element being targeted.
    – James
    Commented Jun 29, 2009 at 10:01
  • btw,how to make the first span's width:120px?
    – omg
    Commented Jun 29, 2009 at 10:04
  • span doesn't take a width because it's an inline element (it's as wide as it's content), can you make it a div instead?
    – henrikpp
    Commented Jun 29, 2009 at 10:07
  • 1
    Regarding the background color it would likely be best to do this in your css stylesheet: .class:hover{background:#bbb;}
    – Hank
    Commented Jul 16, 2011 at 19:21
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.

2
  • and how to change the background color of div when mouse is on?
    – omg
    Commented Jun 29, 2009 at 9:48
  • add a hover on the css
    – CharybdeBE
    Commented Dec 11, 2017 at 13:57
11

The simplest of them all:

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
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', '');
    }
  );
2
  • 1
    As has been posted in a comment above; why use a framework for such a simple thing? Commented Jun 29, 2009 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
    Commented Jul 1, 2009 at 1: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?

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.

1
  • 3
    Why's this obtrusive? It does what the OP asked for.
    – JonoW
    Commented Jun 29, 2009 at 10:29
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";
    };
}
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

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

2
  • 1
    Why should he/she use an entire framework for something so simple!?!?
    – James
    Commented Jun 29, 2009 at 9: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
    Commented Jun 29, 2009 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.