ボタンにhoverが使えない

このような記述でボタンを作ったのですが、このボタンをクリックまたはhoverした時に、透過させたいのですができません。どうすればよいのでしょうか？

行動規範の内容に同意します

回答3件

「透過」なら opacity もどうでしょう。

HTML
1<style>
2input[type="button"]:hover,
3input[type="button"]:active {
4	opacity: 0.5;
5}
6</style>
7<form><input type="button" value="更新する" onclick="javascript:history.go(0)"></form>

投稿2016/05/07 01:40

kei344

総合スコア69407

http://jsdo.it/katoy/KIi2 に作成してみました。

html は次のように id を指定しました。

html
1<Form>
2    <Input id="button-01" type="button" value="更新する" onClick="alert('cliked');">
3</Form>

投稿2016/05/06 23:53

katoy

総合スコア22324

クリックしたときは:active疑似セレクタ(ただし、これはクリック中であり、手を離せば元に戻ります)、マウスホーバーしたときは:hover疑似セレクタで指定します。透過する場合はbackground-color: transparent;とすればできると思います。ただ、ボタンはbackground-color等を変更すると全体とスタイルが変更される場合があります。あらかじめ、デフォルトの状態のboderやbackgroudを設定しておいてください。

下記はサンプルです。type="button"のinput全てに適用したくない場合は、必要に応じてclassやidで絞るようにしてください。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>Test</title>
7  <style>
8    body {
9      background-color: #cce;
10    }
11    input[type="button"] {
12      border: 1px solid #ccc;
13      background-color: white;
14      border-radius: 5px;
15    }
16    input[type="button"]:hover {
17      background-color: transparent;
18    }
19    input[type="button"]:active {
20      background-color: transparent;
21    }
22  </style>
23</head>
24<body>
25  <form>
26    <input type="button" value="更新する" onclick="return false;">
27  </form>
28</body>
29</html>