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

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

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

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

Q&A

解決済

1回答

695閲覧

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

King_of_Flies

総合スコア382

CSS

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

0グッド

0クリップ

投稿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

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

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

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

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

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

guest

回答1

0

ベストアンサー

css

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

投稿2022/11/14 04:17

yambejp

総合スコア114572

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

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

King_of_Flies

2022/11/14 04:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問