締切り済みの質問
いつもお世話になってます。
宜しくお願い致します。
クロム、firefox、オペラ、サファリ、IE7、IE8ですと、
正常に動作するのですが、IE6だけ動作しません。
(IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています)
動作内容:画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。
何卒、お願いします。
htmlソース
<dl id="dl1">
<dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt>
<dd class="dd"><a href="#">あああああああ</a></dd>
</dl>
cssソース
#dl1
{
border-style: none;
width: 170px;
height: 170px;
padding: 10px 10px 0px 35px;
margin: 0;
float: left;
line-height: 0px;
font-size: 0px;
}
#dt1 a
{
display: block;
with: 170px;
height: 170px;
background-position:left top;
background-repeat:no-repeat;
text-decoration: none;
}
#dt1 a img
{
text-decoration: none;
border-style: none;
}
#dt1 a:hover
{
background-image: url(img/main-content-image1-2.jpg);
text-decoration: none;
}
#dt1 a:hover img
{
visibility: hidden;
text-decoration: none;
border-style: none;
}
.dd
{
width: 170px;
height: 40px;
margin: 0px;
color: #ffffff;
font-size: 12px;
line-height: 16px;
padding: 0;
}
.dd a
{
padding: 0;
margin: 0;
text-decoration: none;
color: #ffffff;
}
.dd a:hover
{
text-decoration: underline;
color: #ffffff;
}
投稿日時 - 2009-12-14 02:04:40
1人が「このQ&Aが役に立った」と投票しています
回答(1件中 1~1件目)
ソースは長いので確認してませんが、
動作しない箇所に、IE6用の記述で解決するかもしれません。
スターハックと呼ばれる手法で
以下のURLに説明があります。
http://blog.worldending.jp/web/css-hack.php
投稿日時 - 2009-12-14 15:07:11
お礼
ieのバージョンごとにcssを切り替えていますので、ハックは使っていません。
ありがとうございます。
投稿日時 - 2009-12-14 22:08:09