Question

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

对于上面的div，当鼠标开启时，它应该变成光标：指针，点击时，触发

javascript函数，该怎么做？

编辑：以及如何在鼠标开启时更改div的背景颜色？

再次编辑：如何使第一个跨度的宽度= 120px？似乎无法在firefox中运行

Answer 1

给它一个类似“某事”的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 = '';
};

Answer 2

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

是最简单的方法。

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

Answer 3

我建议使用jQuery：

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );

Answer 4

我建议使用一个名为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;
}

很简单，不是吗？

Answer 5

添加onclick属性

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

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

div[onclick] {
  cursor: pointer;
}

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

Answer 6

当您更新问题时，这是一个突出的例子：

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>

这也会改变背景颜色

Answer 8

如果这个div是一个函数，我建议在你的样式中使用cursor：pointer，如style =“cursor：pointer”，并且可以使用onclick函数。

像这样

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

但我建议你使用像jquery或extjs

这样的JS框架

如何使div可点击？

8 个答案: