1

マウスオーバーまたはクリックでプライマリ イメージをオーバーレイするセカンダリ イメージを取得しようとしている Web サイト ページがあります。イメージ オーバーレイ アクションは、プライマリ イメージのホットスポットによってトリガーされます。コードは Chrome、Safari、Firefox、Opera 内で動作しますが、IE では動作しませんか? IEで修正する方法を知っている人はいますか？

ウェブページ: http://www.neurobalancingcenter.com

スタイルコード:

<style type="text/css">
.imgoverlay 
{
position:absolute;
margin: 10px 0 0 487px;
}
</style>

JavaScript コード:

<script type="text/javascript">
$(document).ready(function () {
    $('.jkimagelarge').hover(
       function () {
           $('.pic').prepend('<div class="imgoverlay"><img src="' + $(this).attr('pic') + '" /></div>');
       },
       function () {
           $('.imgoverlay').each(function () { $(this).hide(); });
       }
    );
});

</script>

本体コード:

<div class="pic">
<map id="FPMap0" name="FPMap0">
<area coords="508, 227, 738, 252" href="#" pic="/images/what_is_bwo.jpg" shape="rect" class="jkimagelarge" />
<area coords="508, 252, 726, 279" href="#" pic="/images/why_bwo.jpg" shape="rect" class="jkimagelarge" />
<area coords="508, 279, 667, 300" href="#" pic="/images/how_bwo.jpg" shape="rect" class="jkimagelarge" />
</map>
<img src="images/homepage_a_focused_mind.jpg" alt="" title="" usemap="#FPMap0" />
</div>
4

1 に答える 1

0

これは解決策ではありませんが、検討の余地があります。この手法で問題を解決できるはずです。

http://jsbin.com/aqobuj/1/edit

a {
  display:block;
  border:solid;
}
div {
  border:solid;
  height:100px;
  display:none;
}
a.one:hover ~ div#one {
  display:block;
}
a.two:hover ~ div#two {
  display:block;
}
a.three:hover ~ div#three {
  display:block;
}

使用されたテクニック:

  • ホバー CSS 疑似セレクター
  • display:block/none (css の非表示/表示)
  • チルダ/兄弟セレクター (この場合、クラス x の次の div を教えてください)
于 2013-07-12T21:09:06.407 に答える