質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

3093閲覧

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

BetterEveryday

総合スコア19

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/07 03:06

編集2020/05/07 11:08

前提・実現したいこと

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

発生している問題

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

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

該当のソースコード

css

1tr.indexLevel1 { 2 background-color: #dedede; 3} 4.indexLevel1 td { 5 border-width: 0px 0px 0px 10pt; 6 border-style: none none none solid; 7 border-color: black black black crimson; 8 border-radius: 1px; 9 padding:.4em; 10 line-height:1.4; 11 font-size:1.1em; 12 transition: all 1.0s ease; 13} 14td.indexLink:hover { 15 background-color: gray; 16 color: white; 17} 18tr.indexLevel1 a:hover { 19 background-color: gray; 20 color: white; 21} 22tr.indexLevel1 a { 23 display: block; 24 width: 100%; 25 height:100%; 26} 27 28.indexLevel2 { 29 border-left: 7px solid #1abc9c; 30 padding: 16px 0 13px 13px; 31} 32 33a:link { color:black; text-decoration:none; } 34a:hover { color:#cc141c; background:#eeeded; } 35a:hover span { color:#cc141c; } 36.en { font-family: Karla, Century Gothic, Futura,sans-serif; } 37

html

1<table width="100%" cellspacing="0"> 2 <tbody> 3 <tr class="indexLevel1"> 4 <td> 5 <a href="#"> 6 <h3><strong>■Index &#160;見出し【リンクあり】</strong></h3> 7 </a> 8 </td> 9 </tr> 10 </tbody> 11</table> 12<br> 13<table width="100%" cellspacing="0"> 14 <tbody> 15 <tr class="indexLevel1"> 16 <td> 17 <h3><strong>■見出し【リンクなし】</strong></h3> 18 </td> 19 </tr> 20 </tbody> 21</table>

JavaScript

1 window.addEventListener('DOMContentLoaded', function (){ 2 const cIndex = document.querySelectorAll('.indexLevel1 > td'); 3 for (let i = 0; i < cIndex.length; i++) { 4 if (cIndex[i].querySelectorAll('a').length > 0) { 5 cIndex[i].classList.add('indexLink'); 6 } 7 } 8 }); 9

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

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

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

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

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

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

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6tr.indexLevel1 { 7 background-color: #dedede; 8} 9.indexLevel1 th { 10 border-width: 0px 0px 0px 10pt; 11 border-style: none none none solid; 12 border-color: black black black crimson; 13 border-radius: 1px; 14 line-height:1.4; 15 font-size:1.1em; 16} 17tr.indexLevel1 a, 18tr.indexLevel1 > th > h3, 19tr.indexLevel1 > td > h3{ 20 display: block; 21 width: 100%; 22 height:100%; 23 padding: 30px 0; 24 color: black; 25 transition: all 1.0s ease; 26} 27 28tr.indexLevel1 > th > h3:hover { 29 background-color: gray; 30 color: white; 31 32} 33a:link { 34 color:black; 35 text-decoration:none; 36} 37 38

投稿2020/05/07 04:18

編集2020/05/07 10:32
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BetterEveryday

2020/05/07 06:09

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

2020/05/07 06:33

a 要素が親要素でないくて、td要素が親要素の場合の h3にパディング間隔を設定したいということだとすると、下記のようなセレクタになります。 tr.indexLevel1 > td > h3 { padding: 30px 0; /*お好みの設定に*/ }
BetterEveryday

2020/05/07 08:51 編集

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

2020/05/07 10:31

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

2020/05/07 12:00

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

2020/05/07 12:08

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

2020/05/07 12:33

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

0

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

css

1tr.indexLevel1 { 2 background-color: #dedede; 3} 4.indexLevel1 td { 5 border-width: 0px 0px 0px 10pt; 6 border-style: none none none solid; 7 border-color: black black black crimson; 8 border-radius: 1px; 9 padding: .4em; 10 line-height: 1.4; 11 font-size: 1.1em; 12 transition: all 1.0s ease; 13} 14td.indexLink:hover { 15 background-color: gray; 16 color: white; 17} 18td.indexLink a { 19 color: inherit; 20 text-decoration: none; 21 /* クリックさせる範囲を高さいっぱいにしたいならここから下の行も必要 */ 22 display: block; 23 height: 100%; 24 box-sizing: border-box; 25 border: .1px solid transparent; 26} 27 28.indexLevel2 { 29 border-left: 7px solid #1abc9c; 30 padding: 16px 0 13px 13px; 31} 32 33.en { font-family: Karla, Century Gothic, Futura, sans-serif; }

投稿2020/05/07 04:59

thyda.eiqau

総合スコア2982

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BetterEveryday

2020/05/07 06:10

thyda.eiqau さん、 コードを回答いただきましてどうもありがとうございます。 回答いただいた css では hover 時に padding 領域以外の a 要素が薄グレー背景になってしまいました。 hatena19 さんに回答いただきました、ユニバーサルセレクタですべての要素の余白を 0 にしておき、 a 要素へパディング設定することにより、困っていた以下 2 点に対応できることを確認できましたので、 - padding 領域にも背景色とフォント色を適用する - padding 領域を目立たせずに transition も適用する 解決済みにしようと思います。
guest

0

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

CSS

1td.indexLink:hover, 2td.indexLink:hover a { 3 background-color: gray; 4 color: white; 5}

投稿2020/05/07 03:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BetterEveryday

2020/05/07 06:08

kei344 さん、 コードを回答いただきましてどうもありがとうございます。 回答いただきました、td:hover で限定しつつ a をセレクト対象にすることで、 padding 領域にも背景色とフォント色を適用されることを確認できました。 その他の要望としまして、padding 領域を目立たせずに transition を併用したい、という課題が残りますが、 hatena19 さんに回答いただきました、padding 設定変更により、以下 3 要望をすべて満たすことができましたので、 要望1. padding 領域を設定したい (枠と文字の間に間を空けたい) 要望2. hover 時に padding 領域を視認できないようにしたい 要望3. transition を適用したい (hover 時の動きをゆったりさせたい) 解決済みにしようと思います。
guest

0

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

投稿2020/05/07 03:49

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BetterEveryday

2020/05/07 06:08

yambejp さん、 迅速な返信ありがとうございます。 JavaScript を外してみたところ、hover しても padding 領域の背景色は変わらず、薄グレーのまま残ってしまいます。 kei344 さんに回答いただきました、td:hover で限定しつつ a をセレクト対象にすることで、 padding 領域にも背景色とフォント色を適用させることができましたので、 解決済みにしようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問