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

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

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

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

解決済

cssでhover時の文字色変更をしたいが、borderも変わってしまう。

King_of_Flies
King_of_Flies

総合スコア381

CSS

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

1回答

0グッド

0クリップ

177閲覧

投稿2022/11/14 04:07

質問内容
cssでcolorプロパティがあるが、
table-borderを適用範囲から除外し、
fontのみ色が変わる方法はないか。

問題点
文字色のみ変更予定だが、テーブルボーダーの色も変わってしまう。

試したこと
①.std:hover にcolor:red;を追加:ボーダーの色も変わってしまう。
②span:hover {color:red;}を追加:文字にカーソルを合わせた時は文字の色だけ変わるが、<td class="std">のブロックにカーソルを合わせた場合は文字の色は変化しない

やりたいこと
<td class="std">のブロックにカーソルがあった場合、
td要素内の背景色と、文字色を変更する。
ただし、tableの罫線の色は変えない。

html

1<table> 2 <th></th> 3 <tr> 4 <td class="btd">黒鹿毛</td> 5 </tr> 6 <tr> 7 <td class="std"><span>ナリタブライアン</span></td> 8 </tr> 9 <tr> 10 <td class="btd">栗毛</td> 11 </tr> 12 <tr> 13 <td class="std"><span>タイキシャトル</span></td> 14 </tr> 15 <tr> 16 <td class="std"><span>サクラローレル</span></td> 17 </tr> 18</table>

css

1table{ 2 text-align: left; 3 width:700px; 4 border-top:1px solid; 5 border-left:1px solid; 6 border-right:1px solid; 7 border-bottom:1px solid; 8 border-collapse: collapse; 9 background-color: #F4F4F9; 10} 11 12/* テーブルヘッダの設定 */ 13th { 14 border-top:1px solid; 15 border-left:1px solid; 16 border-right:1px solid; 17 border-bottom:1px solid; 18 border-collapse: collapse; 19 background-color: #E8F9EB; 20 width:375px; 21 height:30px; 22} 23 24/* テーブルデータの設定 */ 25td { 26 width:375px; 27 height:30px; 28} 29 30/* テーブルデータ要素 中タイトル設定 */ 31.btd { 32 font-weight:bold; 33 border-top:1px solid; 34 border-left:1px solid; 35 border-right:1px solid; 36 border-bottom:1px solid; 37 padding-left: 20px; 38} 39 40/* テーブルデータ要素 小タイトル設定 */ 41.std { 42 border-top:1px solid; 43 border-left:1px solid; 44 border-right:1px solid; 45 border-bottom:1px solid; 46 padding-left: 40px; 47 cursor: pointer; 48} 49 50.std > span { 51 color:#7b68ee; 52} 53 54/* リンク選択時仕様 */ 55.std:hover { 56 background-color:F9E8F6; 57 cursor: pointer; 58} 59

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

css

1.std:hover span{ 2color:red; 3}

投稿2022/11/14 04:17

yambejp

総合スコア108937

退会済みユーザー👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

King_of_Flies

2022/11/14 04:20

めっちゃ凡ミスでした。。ありがとうございます。 .std:hover > span { color:red; } としていて、なんで出来ないんだ…と迷走しておりました。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS

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