Javascript 如何使用HTML/CSS/JS在单击时更改图像并在发布时还原

我对设置对象样式以使其看起来像按钮和充当功能链接存在问题

我试图实现的效果是表示一个按钮，因此当单击时，它将开始加载目标页面，但对对象设置动画，以直观地表示正在按下的按钮

下面是一个（非工作）示例，以显示所需的效果

first fiddle目前还没有JavaScript，因为我目前是一个手动输入JavaScript的新手

我曾尝试使用伪类，例如

：hover

，作为临时解决方案，但它并没有按预期工作，而且从我的尝试来看，我在其他问题上看到的所有可能的解决方案似乎都无法解决我的问题

我在另一个问题中发现了一些关于这个主题的内容，但我似乎无法使它适用于图像，它只适用于文本，我尝试的任何更改似乎都会破坏它或使对象无法工作，甚至出现

如果有任何帮助，我将不胜感激，因为我已经尝试了几个星期不同的方法

---

提前感谢

您可以在css中使用

：hover

---

在您的情况下（不带js），在

img

中使用背景url，并在

img:hover

中更改其url。您可以将按钮包装在空的锚定标记中，然后在a标记上使用：活动选择器

a:active{
  //some styling
}

请在此处查看选择器中的标签：

另一种方法是使用复选框hack：

或者在js中，类似于：

var my_button = getElementById('button')
var clicked = false;
var buttonClicked = function(e){
  if(!clicked){
    my_button.classList.add("downClass");
  }else{
    my_button.classList.remove("downClass");
  }
}

my_button.addEventListener('click',buttonClicked);

---

您可以在css中定义img，并使用一点jquery来达到预期效果：

.button{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat 0 top;
    width: 300px;
    height: 300px;
    display: inline-block;
}
.button.click{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat  -300px top;
}

这里是js

$('.button').on("mousedown", function(){
    $(this).addClass('click');
})
$('.button').on("mouseup", function(){
    $(this).removeClass('click');
})

---

只有jquery的解决方案也是可能的。

我不介意在必要时使用JavaScript，但我需要在单击时将图像更改为第二个示例，而不是悬停，因为它没有提供我需要的结果。我查看了（不工作的）JS小提琴。你需要有2个图像。一个用于在未单击时显示，另一个用于在单击时显示。但菲德尔只有一个形象。一旦您得到了2个图像，那么在onclick事件侦听器中就可以根据您的需求完成这项工作。（上传小提琴中的第二幅图像）。-----要在鼠标位于图像上时获取手光标，请使用CSS中的

span img{position:absolute；clip:rect（0px，300px，300px，0px）；光标：pointer；}