横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
アンカー画像にマウスオーバーすると、マウスオーバーでデザインを変更する
dt a:hover img.photo の背景画像(background-image) プロパティの
写真枠の背景画像を変更する。
cssの書き方 |
/*------------------------------------------------------- 03-10 画像の周りの変更 -------------------------------------------------------- */ .ibox_431{ margin: 0 0 15px 0; width: 470px; height:100px; /* 高さを統一する必要があります */ background-repeat: no-repeat; } .ibox_431 dt img.photo{ float: left; margin: 0 10px 0 0; padding: 5px; background-image: url("photoBg.gif"); background-repeat: repeat; background-position: left top; } .ibox_431 dt a:hover img.photo{ background-image: url("photoBg_hover.gif"); } .ibox_431 dt img.title{ margin: 0 0 5px 0; } .ibox_431 dd{ margin: 0 0 0 170px; font-size: small; line-height: 1.2; } |
---|---|
HTMLの使用例 |
<dl id="serviceCafe" class="ibox_431"> <dt><a href="#"> <img src="photoCafe.jpg" alt="" class="photo" /> <img src="titleCafe.gif" alt="カフェ事業" class="title" /></a></dt> <dd>「ご飯が食べたい」文字列 ・・・</dd> </dl> |