質問内容
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/14 04:20