css　hover　ie6(1/1)

<< 前の質問 | 次の質問 >>

回答受付中の質問

css　hover　ie6

css　hover　ie6
いつもお世話になってます。
宜しくお願い致します。

クロム、firefox、オペラ、サファリ、IE7、IE8ですと、
正常に動作するのですが、IE6だけ動作しません。
cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。)
(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 21:59:05

通報する
回答する

QNo.5522899

smiab

すぐに回答ほしいです

はい

0人が「このQ&Aが役に立った」と投票しています

[  前へ  |  次へ ]

回答（3件中　1～3件目)

ANo.3

yanagiman2

imgでhoverのソース若干間違ってたので
以下をどうぞ


<dl id="dl1">
<dt id="dt1"><a href="#"><img src="iamge1.gif" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt>
<dd class="dd"><a href="#">あああああああ</a></dd>
</dl>



body { behavior : url ("csshover.htc") ; }

#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;
background-image: url(image1.gif);
}

#dt1 a img:hover{
text-decoration: none;
border-style: none;
background-image: url(image2.gif);
}


#dt1 a:hover
{

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: #666555f;
}


.dd a:hover
{
text-decoration: underline;
color: #654789;
}

投稿日時 - 2009-12-18 01:10:08

お礼する
補足する
回答を評価する （0）
通報する

ANo.2

yanagiman2

提示頂いたソースだと
結局aタグにhover指定してるので
csshover.htcはいらないのでは？


<dl id="dl1">
<dt id="dt1"><a href="#">画像</a></dt>
<dd class="dd"><a href="#">あああああああ</a></dd>
</dl>

#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-image: url(image1.gif);
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(image2.gif);
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;
}


imgでhoverするならこうとかはいかがでしょうか？
<dl id="dl1">
<dt id="dt1"><a href="#"><img src="" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt>
<dd class="dd"><a href="#">あああああああ</a></dd>
</dl>

body { behavior : url ("csshover.htc") ; }



#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;
background-image: url(image1.gif);
}

#dt1 a img:hover
{
text-decoration: none;
border-style: none;
background-image: url(image2.gif);
}


#dt1 a:hover
{
background-image: url(image2.gif);
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;
}

当方のIEtesterの６では動作しましたです。
参考までに

投稿日時 - 2009-12-18 00:58:25

お礼する
補足する
回答を評価する （0）
通報する

ANo.1

yyr446

IE6だけ動作しないという事は、csshover.htcが適用されていないのでは？
提示されているCSSにはcsshover.htcのbehavior定義が無いけど、
ここに載せてないだけですよね。
それから、behaviorのURLはhtmlからの相対パスになってますか。

投稿日時 - 2009-12-15 12:37:08

補足

csshover.htc適用しています。
behavior定義もパスも大丈夫でした。
テキストの色が変わるhoverは適用されているのですが、
なぜか画像の切り替えだけは動作しません。

投稿日時 - 2009-12-15 22:35:33

お礼する
回答を評価する （0）
通報する
<<前へ 1 次へ>>

あなたにおすすめの質問

オススメのQ&Aはありません。

ページTOP

スポンサーサイト検索

レンタルサーバー / ドメイン取得 / ホスティング / SEO対策 / LAN / ネットワークセキュリティ / HDD / インターネットビジネス / Illustrator / Java

カテゴリ

[一覧 ]

新着

愛車無料査定Ｑ＆Ａ特集

あなたの愛車は今いくら？

愛車無料査定Ｑ＆Ａ特集

ニキビケアＱ＆Ａ特集

ニキビケアＱ＆Ａ特集

スッピンでも輝くモテ美肌に。

教えて！みんなの婚活Ｑ＆Ａ特集

教えて！みんなの婚活Ｑ＆Ａ特集

みんなの婚活体験談、秘訣がいっぱい！

お部屋探しはCHINTAI

マチから探せる新しいお部屋探し！

注目ピックアップ

保険マンモス

月1万円をらくらく節約♪

意外な効果！生命保険で家計節約？特集

OKちゃんねる

OKちゃんねる

OKWaveからみなさんに質問！

OKWaveスタッフブログ

スタッフブログ

知って得する！お得な情報をお届け！

おすすめリンク