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

Question

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

另一件事是:当用户点击时，我希望按钮在短时间内变为打开状态，比如说 0.2 秒，然后返回到关闭状态。然后必须遵循 div 的 url。

我现在面临的问题:

1. 当鼠标悬停在div上时，浏览器没有显示手指，表示该区域可点击；
2. 当用户单击 div 时，背景图像会更改为打开(这很好)，但它会保持打开状态，除非我刷新页面。

这是我的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;
}

如何让图像在短时间后恢复为关闭状态，在悬停时将其更改为打开状态并强制浏览器显示手指...

另一个同样好奇的问题:有没有一种方法可以不使用 div 中的所有代码来实现它？我宁愿让 div 干净。

Answer 1

在你的 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 中删除了不必要的属性。