Question

我在设置对象样式时遇到问题，使其看起来像按钮和充当功能链接。

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

这是一个（非工作）JS Fiddle作为所需效果的一个例子。

现在第一小提琴没有JavaScript，因为我现在是手动输入它的新手。

我尝试过使用伪类，例如:hover作为临时解决方案，但它并没有按照预期的方式工作，而且从我尝试过的方法来看，我所看到的每一个可能的解决方案其他问题似乎无法解决我的问题

This JS Fiddle我在另一个问题中找到了对该主题的一些报道，但我似乎无法使其适用于图像，它只适用于文本和我尝试的任何更改似乎只是打破它或使对象不起作用甚至不出现。

任何对此的帮助都会非常感激，因为我已经尝试了几周不同的方法。

先谢谢

Answer 1

您可以在css中使用:hover。

https://jsfiddle.net/pmy74ox5/6/

在你的情况下（没有js），在img中使用background-url并在img:hover中更改其网址

Answer 2

您可以将按钮包装在空锚标签中，然后在标签上使用：active选择器。

a:active{
  //some styling
}

在这里查看标签的选择器：

http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

另一种方法可能是使用复选框hack： https://css-tricks.com/the-checkbox-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);

Answer 3

您可以在css中定义img并使用一点jquery来获得所需的效果：

RUN_ALL_TESTS()

这里是js

.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;
}

https://jsfiddle.net/pmy74ox5/7/

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

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

3 个答案: