hover がすぐに効かない (フォント色が切り替わらない領域がある)

Question

前提・実現したいこと

hover 時に背景色とフォント色を変更したい。
|hover|背景色|フォント色|イメージ|
|:--|:--:|--:|
|前|薄グレー|黒|
|
|後|濃グレー|白||

発生している問題

hover 時に
背景色はすぐに切り替わるが、(○)
フォント色はすぐに切り替わらない(×)。
(リンク表示文字列にカーソルを近づけるとフォント色も切り替わる)
|hover|背景色|フォント色|イメージ|
|:--|:--:|--:|
|後|○濃グレー|×黒||

hover 範囲の問題でしょうか? (padding 領域に効いていないのでしょうか?)

該当のソースコード

tr.indexLevel1 {
    background-color: #dedede;
}
.indexLevel1 td {
    border-width: 0px 0px 0px 10pt;
    border-style: none none none solid;
    border-color: black black black crimson;
    border-radius: 1px; 
    padding:.4em;
    line-height:1.4;
    font-size:1.1em;
    transition: all  1.0s ease;
}
td.indexLink:hover {
    background-color: gray;
    color: white;
}
tr.indexLevel1 a:hover {
    background-color: gray;
    color: white;
}
tr.indexLevel1 a {
    display: block;
    width: 100%;
    height:100%;
}

.indexLevel2 {
    border-left: 7px solid #1abc9c;
    padding: 16px 0 13px 13px;
}

a:link		{ color:black; text-decoration:none; }
a:hover	{ color:#cc141c; background:#eeeded; }
a:hover span { color:#cc141c; }
.en    { font-family: Karla, Century Gothic, Futura,sans-serif; }

<table width="100%" cellspacing="0">
   <tbody>
      <tr class="indexLevel1">
         <td>
            <a href="#">
               <h3><strong>■Index &#160;見出し【リンクあり】</strong></h3>
            </a>
         </td>
      </tr>
   </tbody>
</table>
<br>
<table width="100%" cellspacing="0">
   <tbody>
      <tr class="indexLevel1">
         <td>
            <h3><strong>■見出し【リンクなし】</strong></h3>
         </td>
      </tr>
   </tbody>
</table>

    window.addEventListener('DOMContentLoaded', function (){
        const cIndex = document.querySelectorAll('.indexLevel1 > td');
        for (let i = 0; i < cIndex.length; i++) {
            if (cIndex[i].querySelectorAll('a').length > 0) {
                cIndex[i].classList.add('indexLink');
            }
        }
    });

試したこと

リンクのブロック指定。
display:block;
height:100%;

補足情報（FW/ツールのバージョンなど）

ターゲットブラウザ: Internet Explorer 11

Answer 1

ご希望のことは、背景色や文字色の変更だけでなく、aタグのリンク反応範囲を親要素のサイズまで拡張させたいことだと推測します。

通常は aタグに display: block;を設定してブロック要素にすればいいのですが、今回はうまくいってません。原因は、aタグ内にh3要素がありそれのデフォルトのマージン分だけ拡張できていないことです。

解決法としてはh3要素のマージンを0にして、代わりにa要素にパディングを設定すればいいでしょう。

ただデフォルトの余白はブラウザごとに異なっていたりするので、ユニバーサルセレクタですべての要素の余白を0にしておくか、リセットCSSを使うといいでしょう。

あと、hover を複数要素に設定すると複雑になるので、a要素のみに設定する方がいいでしょう。

* {
  margin: 0;
  padding: 0;
}

tr.indexLevel1 {
  background-color: #dedede;
}
.indexLevel1 th {
  border-width: 0px 0px 0px 10pt;
  border-style: none none none solid;
  border-color: black black black crimson;
  border-radius: 1px; 
  line-height:1.4;
  font-size:1.1em;
}
tr.indexLevel1 a,
tr.indexLevel1 > th > h3,
tr.indexLevel1 > td > h3{
  display: block;
  width: 100%;
  height:100%;
  padding: 30px 0;
  color: black;
  transition: all  1.0s ease;
}

tr.indexLevel1 > th > h3:hover {
  background-color: gray;
  color: white;

}
a:link   {
  color:black;
  text-decoration:none;
}

Comments

[BetterEveryday]

hatena19 さん、
コードを回答いただきましてどうもありがとうございます。
回答いただきました、ユニバーサルセレクタですべての要素の余白を 0 にしておき、
a 要素へパディング設定することにより、困っていた以下 2 点に対応できることを確認できました。

- padding 領域にも背景色とフォント色を適用する
- padding 領域を目立たせずに transition も適用する

追加で 1 点質問させてください。パディングは a 要素に設定しましたが、
a 要素を子に持たない tr/td にも同様のスタイル (パディング間隔/背景色/罫線色) にしたい場合、

<table width="100%" cellspacing="0">
<tbody>
<tr class="indexLevel1">
<td>
<h3>
<strong>■見出し【リンクなし】</strong></h3>
</td>
</tr>
</tbody>
</table>

別の方法、別のクラスで対応するしかないのでしょうか?

もしお時間あるタイミングがありましたら、検討いただけませんでしょうか?
どうぞよろしくお願いいたします。

[hatena19]

a 要素が親要素でないくて、td要素が親要素の場合の h3にパディング間隔を設定したいということだとすると、下記のようなセレクタになります。

tr.indexLevel1 > td > h3 {
padding: 30px 0; /*お好みの設定に*/
}

[BetterEveryday]

hatena19 さん、
再回答いただきましてどうもありがとうございます。
追加でいただいた、h3 を指定した padding 設定を追加すると、
リンク有りとリンク無し、両方を同じスタイル (背景色/罫線色) にできました。

しかし、実際のターゲット環境 (SharePoint) に移植すると、以下の現象になります。

リンク有り要素の
Html 要素順序が
<a><h3> の場合、
hover でフォントが白にならない。(黒のまま)

Html 要素順序を逆、
<h3><a> にすると、
hover で padding 領域が薄グレー背景色で残る。

<h3><a> のまま、
追加した h3 を指定した padding 設定を削除すると、
リンク有り要素は hover 時もすべて想定通りになる、背景色(濃いグレー)、フォント(白)、パディング(隠れる) が、
リンク無し要素はパディングなしになってしまう。

これらの現象からなにか分かることはありますか? (例. 移植ミスの可能性など)

自分では何度も確認して打開策を見出せないため、
同じクラス (indexLevel1) を使用して td 罫線やパディングを設定するのは諦め、
リンク無し要素には以下のようにまったく別に重複定義するしかない状況になっています。
<table width="100%" class="ms-rteTable-default" cellspacing="0">
<tbody>
<tr class="ms-rteTableHeaderRow-default indexLevel1">
<th class="ms-rteTableHeaderLastCol-default" style="border-width: 0px 0px 0px 10pt; border-style: none none none solid; border-color: black black black crimson; width: 100%; color: black;">
<h3>​<strong>■見出し【リンクなし】</strong></h3>
</th>
</tr>
</tbody>
</table>

もし、なにか思いつくことがありましたら、お知らせいただけませんでしょうか?
何度も申し訳ございません。どうぞよろしくお願いいたします。

[hatena19]

h3の親要素が td ではなく th になってますのでそれに合わせて変更してください。
回答のコードを、親要素が td でも th でも、また a要素の場合でも同じ設定になるように修正しましたので、参考にしてください。

[BetterEveryday]

hatena19 さん、
伝わるように説明できず、申し訳ございません。
th に変更した理由は、同じクラスを使うことを諦めるしかない場合に、
自分で思いつけたことは、td へのスタイル設定が影響しないように、リンク無しの要素には
あえて th を使い、リンク有りの要素とは切り離して、罫線色が同じになるように個別に重複設定したのです。

やりたいことは「th も使いたい」というわけではありません。
質問の Html ソースに、当初のリンク有り要素に加えて、リンク無し要素も追加しました。

15:33 にコメントいただいた h3 を指定したパディング設定により、
ローカル環境の単独ソースでは狙い通りに、リンク有り要素にも、リンク無し要素にも
罫線、hover 時の背景色、フォント色、padding を確認できたのですが、
ターゲット環境 (SharePoint) のページに組み込むと、
リンク有り要素に 17:50 にコメントしました、私には理解できない現象が発生してしまい、
苦肉の策で、(セル罫線の重複定義をしたくはありませんが)、リンク無し要素には th を登場させています。

やりたいことは「1 つのスタイル定義で、
リンク有り要素も、リンク無し要素にも (td のみで) 罫線を設定し、
リンク有り要素には hover 時に背景色とフォントを変更したい」ことであり、
リンク有り要素とリンク無し項目の 2 項目のみであれば、15:33 にいただいたコメントで達成できているのですが、
実際の SharePoint 環境では不可思議現象に見舞われてしまっているのです。
それで現状の SharePoint 環境では仕方なく、リンク無し要素に th を使用している状況なのです。

伝わりますでしょうか?
17:50 に示しました、現状の SharePoint 環境の th のソースを使って修正したい、というわけではなく、
SharePoint 環境での問題現象を回避するために、「現状はこんな非効率な二重定義になってしまっています、
この二重定義をやめて、SharePoint 環境でも動作するようにするために、
現象とこの現状の回避策から思いつくことはありますか?」ということを質問したかったのです。

ローカル環境で最小限の項目で動作確認できるのに、同一ブラウザ(IE)で
SharePoint 環境では異なる現象になる、というのは、
コードが異なる、移植ミス以外には考えにくい、と自分でも思い、
再三確かめるのですが、自分では違いを見つけられない状態なのです。

なにをしたら、なにがあれば、助けてもらえるでしょうか?

[hatena19]

SharePoint環境はないので動作確認できませんので、これ以上のアドバイスは私からは難しいですね。

[BetterEveryday]

hatena19 さん、
無理難題を質問してしまいまして申し訳ございません。
今回も私のために長時間最善を尽くしていただき、大変助けになりました。
リンク有り要素の padding 問題に対応できたのでは hatena19 さんならではの豊富な経験と CSS 熟知の賜物と感じています。
見かけとしては対処できましたので、リンクなし要素については重複定義するようにしよう思います。
本当にどうもありがとうございました。

Answer 2

なんかたくさん指定しているのがお互いに干渉して、結果期待通りになっていない感がありますが……

tr.indexLevel1 {
    background-color: #dedede;
}
.indexLevel1 td {
    border-width: 0px 0px 0px 10pt;
    border-style: none none none solid;
    border-color: black black black crimson;
    border-radius: 1px;
    padding: .4em;
    line-height: 1.4;
    font-size: 1.1em;
    transition: all 1.0s ease;
}
td.indexLink:hover {
    background-color: gray;
    color: white;
}
td.indexLink a {
    color: inherit;
    text-decoration: none;
    /* クリックさせる範囲を高さいっぱいにしたいならここから下の行も必要 */
    display: block;
    height: 100%;
    box-sizing: border-box;
    border: .1px solid transparent;
}

.indexLevel2 {
    border-left: 7px solid #1abc9c;
    padding: 16px 0 13px 13px;
}

.en { font-family: Karla, Century Gothic, Futura, sans-serif; }

Comments

[BetterEveryday]

thyda.eiqau さん、
コードを回答いただきましてどうもありがとうございます。
回答いただいた css では hover 時に padding 領域以外の a 要素が薄グレー背景になってしまいました。

hatena19 さんに回答いただきました、ユニバーサルセレクタですべての要素の余白を 0 にしておき、
a 要素へパディング設定することにより、困っていた以下 2 点に対応できることを確認できましたので、

- padding 領域にも背景色とフォント色を適用する
- padding 領域を目立たせずに transition も適用する

解決済みにしようと思います。

Answer 3

こういうことでしょうか。

td.indexLink:hover,
td.indexLink:hover a {
    background-color: gray;
    color: white;
}

Comments

[BetterEveryday]

kei344 さん、
コードを回答いただきましてどうもありがとうございます。
回答いただきました、td:hover で限定しつつ a をセレクト対象にすることで、
padding 領域にも背景色とフォント色を適用されることを確認できました。

その他の要望としまして、padding 領域を目立たせずに transition を併用したい、という課題が残りますが、
hatena19 さんに回答いただきました、padding 設定変更により、以下 3 要望をすべて満たすことができましたので、

要望1. padding 領域を設定したい (枠と文字の間に間を空けたい)
要望2. hover 時に padding 領域を視認できないようにしたい
要望3. transition を適用したい (hover 時の動きをゆったりさせたい)

解決済みにしようと思います。

Answer 4

jsはいらないのでは？
cssだけでIE11ほかメジャーなブラウザで動作確認できました

Comments

[BetterEveryday]

yambejp さん、
迅速な返信ありがとうございます。
JavaScript を外してみたところ、hover しても
padding 領域の背景色は変わらず、薄グレーのまま残ってしまいます。

kei344 さんに回答いただきました、td:hover で限定しつつ a をセレクト対象にすることで、
padding 領域にも背景色とフォント色を適用させることができましたので、
解決済みにしようと思います。