Question

我有几张相同按钮的照片，每张照片都以不同的状态表示：正常，按下，聚焦，禁用。

如何将其变成一个自动显示正确图片的html按钮（还有一个onClick事件）？

随意使用html / css / javascript。

标签也不需要是一个按钮，它可以是一个图像，或任何你想要的，但希望以一种通用的方式编写，以便其他人也可以使用你的解决方案

谢谢！

Answer 1

只需在链接中添加一个类：

<a href="#" class='styledbutton'>Buttontext</a>

......和一些CSS：

.styledbutton {background: url(defaultstate.png); display: inline-block;}
.styledbutton:hover {background: url(hoverstate.png);}
.styledbutton:focus {background: url(focusstate.png);}

Answer 2

您可以使用CSS伪选择器:hover和:focus来更改各种不同交互点的按钮状态，并简单地将函数绑定到onclick事件中如果需要，可以运行其他JavaScript：

function buttonClick() {
  console.log('Button clicked');
}

button { /* Default state */
  background: white;
}

button:hover { /* On hover */
  background: red;
}

button:focus { /* After a click */
  background: blue;
}

<button onclick="buttonClick()">Button</button>

请注意，只需将图片的路径作为url()值传递到background-image，就可以对图片进行此操作。

按下/聚焦/禁用时更改按钮图像

2 个答案: