マウスが画像の上に置かれていないときに境界線が表示されないという IE の問題を修正するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/63885

  •  09-06-2019
  •  | 
  •  

質問

一連の画像にかなり単純な効果を作成しようとしています。画像上にマウスが置かれていないときは、単純な灰色の境界線が表示されるようにしたいと考えています。画像が上にある場合は、別の「選択された」境界線を表示したいと思います。

次の CSS は Firefox でうまく機能します。

.myImage a img
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a:hover img
{
    border: 3px solid blue;
    padding: 1px;
}

ただし、IE では、マウスが画像上に置かれていない場合、境界線は表示されません。私の Google 担当者によると、IE にバグがあり、それがこの問題を引き起こしているとのことです。残念ながら、そのバグを修正する方法は見つからないようです。

役に立ちましたか？

解決

別の色を使ってみてください。IE が「グレー」を理解するかどうかはわかりません (代わりに「グレー」を使用してください)。

他のヒント

以下は IE7、IE6、FF3 で動作します。重要なのは、a:link:hover を使用することでした。IE6 では A 要素がブロック要素に変換されたため、内容をシュリンクラップするために float 要素を追加しました。

標準モードであることに注意してください。Quirks モードで何が起こるかわかりません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
      a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
      .myImage a
      {
          float: left;
          clear: both;
          border: 0;
          margin: 3px;
          padding: 1px;
      }
      .myImage a:link:hover
      {
          float: left;
          clear: both;
          border: 3px solid blue;
          padding: 1px;
          margin: 0;
          display:block;
      }
    </style>
  </head>
  <body>
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
  </body>
</html>

私の経験では、IE は擬似クラスではうまく動作しません。これを処理する最も普遍的な方法は、JavaScript を使用して CSS クラスを要素に適用することだと思います。

CSS:

.standard_border
{
    border: 1px solid grey;
    padding: 3px;
}
.hover_border
{
    border: 3px solid blue;
    padding: 1px;
}

インラインJavaScript:

<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />

を使ってみてください 背景 の代わりに 国境.

同じではありませんが、IE では動作します (私のサイトのメニューを見てください: www.monex-finance.net).

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

それをヘッダーに置くと、IE のバグのいくつかが修正されるはずです。

IE にはアンカー要素以外の :hover 疑似クラスに問題があるため、ホバーが影響を与える要素をアンカー自体に変更する必要があります。したがって、「image」のようなクラスをアンカーに追加し、マークアップを次のように変更したとします。

<div class="myImage"><a href="..." class="image"><img .../></a></div>

次に、CSS を次のように変更できます。

.myImage a.image
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a.image:hover
{
    border: 3px solid blue;
    padding: 1px;
}

画像の代わりにアンカーに境界線を配置することで、目的の効果を模倣する必要があります。画像のデフォルトの境界線を削除するには、CSS で次のようなものが必要になる場合があります。

.myImage a img {
    border: none;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top