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;
}

回答No.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;
}

回答No.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の６では動作しましたです。
参考までに

回答No.1

yyr446

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

補足

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