how to make div click-able

Question

lt div gt  lt span gt shanghai lt  span gt  lt span gt male lt  span gt  lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

The simplest of them all    lt div onclick  location href  where you want to go   style  cursor pointer  gt  lt  div gt

User · Answer

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    lt div id  logo  class  clickbox  gt  lt a href  index php  gt  lt  a gt  lt  div gt    Plus a CSS style to change the mouse cursor    clickbox       cursor  pointer      Easy  isn t it

User · Answer

add the onclick attribute   lt div onclick  myFunction  event     gt  lt span gt shanghai lt  span gt  lt span gt male lt  span gt  lt  div gt    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

User · Answer

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

User · Answer

lt div style  cursor  pointer   onclick  theFunction    onmouseover  this style background  red   onmouseout  this style background      gt  lt span gt shanghai lt  span gt  lt span gt male lt  span gt  lt  div gt    This will change the background color as well

User · Answer

lt div style  cursor  pointer   onclick  theFunction    gt   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

User · Answer

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   lt div onclick  myfunction    style  cursor pointer  gt  lt  div gt    but I suggest you use a JS framework like jquery or extjs

[javascript] how to make div click-able?

Examples related to javascript

Examples related to css

Examples related to html

Examples related to click