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

对于像上面这样的 div，当鼠标打开时，它应该变成 cursor:pointer，当点击时，触发一个

javascript函数，如何完成这项工作？

编辑：当鼠标打开时如何改变 div 的背景颜色？

再次编辑：如何使第一个跨度的宽度=120px？似乎在 Firefox 中不起作用

4

9 回答 9

65

给它一个像“某物”这样的 ID，然后：

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

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

更改背景颜色（根据您更新的问题）：

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};
于 2009-06-29T09:44:07.057 回答
30

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

是最简单的工作。

当然，在最终解决方案中，您应该将标记与样式（css）和行为（javascript）分开 - 在列表中阅读它，以获得不仅解决这个特定问题而且在一般标记设计中的良好实践。

于 2009-06-29T09:37:19.987 回答
9

其中最简单的：

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
于 2018-05-10T15:18:27.497 回答
7

我建议使用 jQuery：

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );
于 2009-06-29T10:09:10.690 回答
5

我建议使用一个名为 clickbox 的 CSS 类并使用 jQuery 激活它：

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

现在您唯一需要做的就是将您的 div 标记为可点击并提供一个链接：

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

加上一个 CSS 样式来改变鼠标光标：

.clickbox {
    cursor: pointer;
}

容易，不是吗？

于 2013-11-27T09:32:19.547 回答
2

添加onclick属性

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

要更改光标，请使用css 的 cursor rule。

div[onclick] {
  cursor: pointer;
}

选择器使用在某些版本的 IE 中不起作用的属性选择器。如果您想支持这些版本，请在您的 div 中添加一个类。

于 2009-06-29T09:35:00.587 回答
2

当你更新你的问题时，这里有一个明显的例子：

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

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}
于 2009-06-29T09:55:29.110 回答
2 
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

这也会改变背景颜色

于 2009-06-29T10:03:34.007 回答
1

如果这个 div 是一个函数，我建议在你的风格中使用 cursor:pointer，比如 style="cursor:pointer" 并且可以使用 onclick 函数。

像这样

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

但我建议你使用像jquery或extjs这样的 JS 框架

于 2009-06-29T09:41:04.100 回答