hoverについて

Question

colでナビメニューを作成しているのですが、メニューをホバーしたときに中の文字のhoverを同時にするのはどうすればよろしいでしょうか？
js等は使用してません。

###発生している問題・エラーメッセージ
要素の端側をホバーしても文字の色が変わらず、文字をホバーしたときに色が変わります。

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

<nav>
 <div class="container">
   <div class="col-md-12 text-center">
   <div class="row">
       <a class="col-md-2 headerbox box-1 active" href="index.html">
        <strong class="c-w">HOME</strong><br>
        <small class="c-w">ホーム</small>
       </a>
       <a class="col-md-2 headerbox" href="#">
        <strong>ABOUT</strong><br>
        <small>会社概要</small>
       </a>
       <a class="col-md-2 headerbox" href="#">
        <strong>GALLERY</strong><br>
        <small>施工事例</small>
       </a>
       <a class="col-md-2 headerbox" href="#">
        <strong>RECRUIT</strong><br>
        <small>採用情報</small>
       </a>
       <a class="col-md-2 headerbox" href="#">
        <strong>AREA&FLOW</strong><br>
        <small>エリア・流れ</small>
       </a>
       <a class="col-md-2 headerbox" href="#">
        <strong>CONTACT</strong><br>
        <small>お問い合わせ</small>
       </a>
    </div><!--▲row▲-->
   </div><!--▲col-md-12 text-center▲-->
 </div><!--▲container▲-->
</nav>
コード

nav a{
	padding-top:4px;
	padding-bottom:4px;
}

.headerbox{
	border-right:solid 1px #e5e5e5;
	text-decoration:none;
}

.box-1{
	border-left:solid 1px #e5e5e5;
}

a:hover{
	background-color:#1941bb;
        color:#fff;
}
コード

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[ubu]

これでよろしいでしょうか？

[kei344]

編集ありがとうございます。CSSでHoverを付けておられるということですね？その場合CSSも質問文に追記されるほうが回答の精度が上がります。もしJavaScriptでHoverの処理をされている場合、スクリプトの記載が無ければ回答できません。

[ubu]

わかりました。編集いたします。

[kei344]

こういう感じですか？⇒ https://jsfiddle.net/67knueaz/

[ubu]

背景部分にマウスを持っていったときにも、文字色を変えたいのですが、うまくいきません。

[kei344]

「a要素」や「背景部分」のスタイルがどのようになっているかが書かれていませんが･･･。「背景部分」は a要素なのでしょうか。

[ubu]

はい、「a要素」に背景色を指定しています。

[kei344]

ならその部分も含め、CSSの記載が足りません。書かれているものはホバー時に背景を指定しているだけです。

[ubu]

その部分に関しましては、背景なしの状態にしております。

[kei344]

メニュー全体のHTMLとCSS、問題点がわかるようなスクリーンショットを追記されてはいかがでしょうか。

[ubu]

遅くなって申し訳ありません。コードを訂正いたしました。

Answer 1

書かれたコードで問題が再現しませんでした。

動くサンプル：https://jsfiddle.net/6cnz12ym/

※ jsfiddle.netの結果表示枠とこちらのディスプレイ（1920x1200）の関係上必要だったので col-xs-2 を足しています。

---

追記：

CSSがどれが適用されてどれが上書きされているかは、デベロッパーツールを見ればわかります。一度確認してみてください。また、HTMLの構造がそもそも間違っている場合はそこが原因でスタイルが崩れることもあります。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[ubu]

再現ありがとうございます。hover時に同時に文字色も変えたいのです。

[htsign]

単に a:hover に対して colorプロパティを指定すればいいのではないですか？

[kei344]

To: ubuさん
質問文のCSSに color 指定が無かったので。
https://jsfiddle.net/6cnz12ym/1/

「要素の端側をホバーしても文字の色が変わらず」は再現しませんでしたが、それについては解決されましたか？

To: htsignさん
補足ありがとうございます！その通りです。

[kei344]

To: ubuさん
CSSで「.nav a」と書かれている箇所について、「nav」というclassが指定されていないので適用されません。今の構造そのまま適用させるのであれば「nav a」と書くことになります。

a要素に直接CSSを適用させるよりはclassを使用したほうが問題は起こりにくいとは思います。直接指定した場合そのページ内の全ての要素に同じ指定が適用されることになりますので･･･。

[ubu]

To:htsignさん
それも試してみたのですが、文字色が変わりませんでした。

To:kei344さん
何度も申し訳ありません。もう一度訂正いたします。

[kei344]

To: ubuさん
https://jsfiddle.net/6cnz12ym/1/

これは見られましたか？色も変わってますよー。

[htsign]

ubuさんは今コードを編集中だと思うので、このタイミングで口を挟むのは若干気が引けるのですが（そもそも回答に割って入っている感じですし…）
kei344さんの「書かれたコードで問題が再現しませんでした」という回答といい、ubuさんの「それも試してみたのですが、文字色が変わりませんでした」といい、何か別のCSS指定が邪魔しているような気がしてなりません。
!important をかけてみて color指定が効くようだったら確実ですね。

[ubu]

To：kei344さん
ありがとうございます！！

[ubu]

To:htsignさん
ありがとうございます！！
今一度他のコード等見返してみます。