spanタグにhoverはつけられるのか

###前提・実現したいこと
spanタグにhoverがつけられない。
Choose Fileにカーソルが乗ったら背景色を変えるようにしたい。

###発生している問題・エラーメッセージ

特にエラーは発生していない。

###該当のソースコード
htmlに

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary　file_select">
            Choose File<input type="file" style="display:none">
        </span>
    </label>
    <input type="text" class="form-control" readonly="">
</div>

<script type="text/javascript">
$(document).on('change', ':file', function() {
    var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\/g, '/').replace(/.*//, '');
    input.parent().parent().next(':text').val(label);
});
</script>

と書いてcssに

.file_select:hover {
  background-color: blue;
}

と書いた。
###試したこと
この場合spanタグにhoverをつけたのが間違いかもしれないと思ったが、じゃあどこにhoverをつければいいのかがわからない。

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

回答4件

btn btn-primary　file_select 全角空白が入っています。

投稿2017/10/14 15:23

kei344

総合スコア69398

abc30

2017/10/15 01:45

全角を半角にしても動きませんでした。。。どうしたら良いでしょうか？

kei344

2017/10/15 02:08

https://jsfiddle.net/ae25fapo/ 提示されているコードだけであれば動きます。他にも全角が混じるなどおかしな箇所が有るのだと思います。 CSSを記述する場所を間違っているとか、CSSの記述部分より前で記述がおかしくなっていて適用されていないとか、考えられることはいろいろ有ります。デベロッパーツールで状況を確認し、原因を隅々まで探してみてください。【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】 http://ryus.co.jp/blog/customize-php-search-1/ 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 http://www.buildinsider.net/web/chromedevtools/01

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

ベストアンサー

以下のようにして実行したところ、正常に動作しているように見えますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .file_select:hover {
9            background-color: blue;
10        }
11    </style>
12</head>
13<body>
14<div class="input-group">
15    <label class="input-group-btn">
16        <span class="btn btn-primary file_select">
17            Choose File<input type="file" style="display:none">
18        </span>
19    </label>
20    <input type="text" class="form-control" readonly="">
21</div>
22<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
23<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
24<script>
25    $(document).on('change', ':file', function () {
26        var input = $(this),
27            numFiles = input.get(0).files ? input.get(0).files.length : 1,
28            label = input.val().replace(/\/g, '/').replace(/.*//, '');
29        input.parent().parent().next(':text').val(label);
30    });
31</script>
32</body>
33</html>

投稿2017/10/22 12:21

編集2017/10/22 12:25

s8_chu

総合スコア14731

エラーのないちゃんとしたコードなら次のようになります。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <style>span#test:hover{background:pink;}</style> </head> <body> <p><span id="test">TEST</span></p> </body> </html>

投稿2017/10/23 00:22