1mouke.com [東京ウェブ制作] - サイト内を検索する  
ドローンの疑問が解決するQ&A【ドローン・アンサー】
FAQ(よくある質問と回答)
Q. 画像ファイルの上にマウスカーソルを乗せると枠が表示させるようにするにはどうすればいいですか?

A. ロールオーバーで、枠無しの画像と枠ありの画像を
差し替える方法もありますが、ただ枠だけを付けたいのであれば
スタイルシートを使う方法があります。

以下、スタイルシートの基礎知識があるという前提で
説明します。

CSSファイルへの定義は、以下のようになります。

img.imglink{ border:1px solid white; }
a:hover img.imglink{ border-color:red; }

ここで、imglink という文字を、HTMLファイル側
の画像の属性に class="imglink" などとして取り込むと、
その画像ファイルにimglinkで設定した内容を
反映させることが可能になります。

border:1px solid white;

としているのは、枠の太さを1ピクセル、色を白
にしているという意味です。背景が白ならば
枠は無いように見えます。

そして、
a:hover img.imglink{ border-color:red; }
で、赤い枠を表示させるようにしています。

hover とは「マウスカーソルが乗ったとき」と言う意味です。


回答者 大和賢一郎

関連する質問

関連する動画

関連する用語

関連する解説

その他の関連情報

FAQ(よくある質問と回答)を検索する

Loading


IT外注のトラブルを解決する
起業家のための、損しないIT外注テクニック
ITエンジニア 大和賢一郎 による技術サポート(ヘルプデスク)です。ウェブ制作に関する情報提供・オンライン個別相談・直接面談・立ち会い・トラブル解決・座学セミナー・スキルアップ個別指導などを無料または有料でご提供いたし ... 続きを読む
東京ウェブ制作 東京HTMLスクール クラウドソーシング 基礎からわかる!HTML超入門 東京ウェブ制作 - 拡販パートナー募集中 フリーランスITエンジニアのエージェント比較 【日本語版】ZendFramework2(ZF2)逆引き辞典 人間ドックの日本最大級口コミサイト「人間ドックサーチ」人間ドックの情報満載 クラウドソーシングの日本最大級口コミサイト【東京ウェブ制作】 あなたの月収が70万円になる 無料WordPress - kyblog(ケーワイブログ) フリーランスITエンジニアの案件検索エンジン「オメガ・サーチ」OMEGA_SEARCHフリーランスITエンジニアのエージェント比較「agentism(エージェント・イズム)」 ドローンの疑問が解決するQ&A【ドローン・アンサー】


今すぐ質問する(無料)
ホームページ作成に関するご質問をお寄せください。無料で回答いたします。回答は よくある質問FAQ にアップされます。今すぐ質問する