何をしたかったか
aタグに対してCSSを適用して、hover時に色を反転させたようとしていました。
作成したコードが下記のコード。
index.html
<table>
<thead>
<tr>
<th>no1</th>
<th>no2</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#"><div>a</div></a></td>
<td>001</td>
</tr>
</tbody>
</table>
style.css
table,td,th {
border: 1px solid black;
}
td {
width: 50px
}
a{
display: inline-block;
text-decoration: none;
border: 5px solid blue;
}
a :hover {
background-color: blue;
color: white;
border: 5px solid blue;
}
div {
width: 40px;
}
何が起こったか
hoverした際にaタグの部分が大きくなり、行の高さが拡大してしまう。
chromeの開発者ツールを見るとborderが二重で適用されているように見える。
何が原因だったか
style.css
a :hover {
xxx:xxx
}
===>
a:hover {
xxx:xxx
}
aと:hoverの間に半角スペースが入っていたことが原因でした。
スペースがない場合、a要素のみに内部のコードが適用されます。
一方でスペースがある場合、a要素内のあらゆる要素に適用されるため、borderがa要素内にあるdivにも適用されてしまい、borderが２重になっていました。
まとめ
chatGPTに「マウスを合わせた時にサイズが変化する要素はありますか」と聞いても「ありません」と帰ってきました。開発者ツールで見比べた結果、borderが2重に適用されていることを発見し、対処をchatGPTに聞いたところ、半角スペースが原因であることが発覚しました。
今回、プログラミングする上で、chatGPTを使っていますが、ほしい答えが得られる時と得られない時は五分五分といった感じでした。