Question

我有一个想要点击的div。这个div里面什么都没有，但有一个背景图像代表按钮状态关闭。当用户使用鼠标悬停div时，我希望按钮更改为开启状态。当鼠标没有悬停在div上时，我希望按钮返回到关闭状态。

另一件事是：当用户点击时，我希望按钮在短时间内更改为ON，假设为0.2秒然后返回OFF。然后必须遵循div的URL。

我现在面临的问题：

当鼠标悬停div时，浏览器没有显示表示该区域可点击的手指;
当用户点击div时，将背景图像更改为ON（很好），但除非我刷新页面，否则它会保持为ON。

这是我的div

<div id="button1" onclick="location.href='http://www.mysite.com';this.id='button1_on';return false;">   </div>

这是css

#button1 {
    position:absolute;
    left:159px;
    top:466px;
    width:119px;
    height:120px;
    background-image:url('images/buttonOFF.jpg');
    background-repeat:no;
        background-position: left top;
}

#button1_on {
    position:absolute;
    left:159px;
    top:466px;
    width:119px;
    height:120px;
    background-image:url('images/buttonON.jpg');
    background-repeat:no;
        background-position: left top;
}

如何在短暂的一段时间后将图像恢复为OFF，在悬停时将其更改为ON并强制浏览器显示手指......

另一个问题就像好奇心一样：有没有办法在不使用div中的所有代码的情况下实现它？我宁愿让divs干净。

Answer 1

这会将指针设置为你想要的

#button1 {
    cursor: pointer;
}

Answer 2

在CSS中尝试这样的事情：

#button1 {
    position:absolute;
    left:159px;
    top:466px;
    width:119px;
    height:120px;
    background-image:url('images/buttonOFF.jpg');
    background-repeat:no;
    background-position: left top;
}

#button1:hover,
#button1:active {
    background-image:url('images/buttonON.jpg');
    cursor:pointer;
}

并且不要使用JavaScript更改ID。

编辑：还有，你有没有理由不使用标签？这些工作甚至可以在没有JS的浏览器中工作，而且你知道......它们的设计恰好是为了让人们点击其他网站。

编辑2：从：hover和：active。

中删除了不必要的属性

Answer 3

第一个问题：

When the mouse hovers the div the browser did not show the finger that denotes that the region is clickable;

使用cursor:pointer

#button1:hover {

cursor:pointer
}

对于您的第二个问题，请添加：

#button1:active {

    background-image:url('images/buttonON.jpg');


}

Answer 4

在悬停cursor: hand; cursor: pointer;上的按钮上使用此功能。并将onclick代码放在单独的JavaScript脚本中。

Answer 5

首先，要使光标看起来像按钮指针，请使用此CSS：

cursor: pointer;

其次，要将JavaScript从DIV移至JavaScript，请在<script>...</script>中添加<head>标记，或通过<script src="mycode.js"></script>链接脚本文件，其中mycode.js将包含您的代码

CSS - 使div可点击......一些问题

5 个答案: