![](/img/trans.png)
[英]How to make expandable table cells hidden by default using jQuery/JavaScript, and click-able outside of a label?
[英]how to make div click-able?
<div><span>shanghai</span><span>male</span></div>
对于像上面这样的div,当鼠标开启时,它应该变成光标:指针,当点击时,触发一个
javascript函数,该怎么做?
编辑 :以及如何在鼠标开启时更改div的背景颜色?
编辑再次 :如何使第一个跨度的宽度= 120px?似乎不能在Firefox中工作
给它一个像“某事”的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 = '';
};
我建议使用jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);
我建议使用一个名为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;
}
容易,不是吗?
当您更新问题时,这是一个令人瞩目的例子:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
这也会改变背景颜色
最简单的是:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.