画像(img)をマウスホバーした時に変な線が出るエラーの対処法

web制作

※この記事は、作成日より一年以上が経過しています。最新の情報ではありませんので、ご注意ください。

読了の目安時間: 052

こんにちは、キヨタツです。

今回はcssでimgなどの画像をマウスホバーした時、その画像の下側に浮かび出てくる変な線(太い領域)のエラーについて対処法を記事にします。

こんなミス起きたことないよ! って人はそっと戻るボタンを押してください。

詳細

どんなエラー?

▼こちらのようにimg画像があるとします。ここにマウスホバーをすると・・・

css1_1

▼このように画像の下部分に変な線が浮かび上がります。(図では緑色になっています。)

css1_2

対処法

答えはcssで該当するimgをブロック要素にすることです。(display:block;にする。)imgはインライン要素ですので、imgにアンカー(aタグ)をつけてマウスホバー(a:hover)で背景の変化をつけようとすると上記のエラーがほぼほぼ起きてしまいます。とくにcss3では画像に対してopacityでマウスホバー時に透過性を与えたい時などに同様のエラーが起きやすいです。ブロック要素とインライン要素を見極めて快適なcssライフを送りましょう!

今読んだ記事をシェアする

thumb_css

画像(img)をマウスホバーした時に変な線が出るエラーの対処法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。