0

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

我想要达到的效果是代表一个按钮，所以当点击时，它将开始加载目标页面，但动画对象以直观地代表一个被按下的按钮。

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

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

我曾尝试使用伪类，例如:hover临时解决方案，但它不能按预期工作，而且从我的尝试来看，我在其他问题上看到的所有可能的解决方案似乎都不能解决我的问题

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

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

提前致谢

4

3 回答 3

0

您可以:hover在 css 中使用。

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

在您的情况下（没有 js），使用 background-url inimg并更改其 urlimg:hover

于 2015-05-07T11:31:42.870 回答
0

您可以将按钮包装在一个空的锚标记中，然后在 a 标记上使用 :active 选择器。

a:active{
  //some styling
}

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

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

另一种方法可能是使用复选框黑客： 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);
于 2015-05-07T11:40:22.593 回答
0

您可以在 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');
})

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

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

于 2015-05-07T11:43:27.837 回答