0

一連の画像にかなり単純な効果を作成しようとしています。画像の上にマウスが置かれていないときは、シンプルな灰色の境界線が欲しいです。その上に画像がある場合は、別の「選択された」境界線が必要です。

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

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

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

4

6 に答える 6

1

以下はIE7、IE6、FF3で動作します。重要なのは、a:link:hover を使用することでした。IE6 は A 要素をブロック要素に変えたので、コンテンツをシュリンクラップするためにフロートを追加しました。

標準モードであることに注意してください。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>
于 2008-09-15T15:50:22.867 に答える
1

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

于 2008-09-15T15:37:13.567 に答える
1

私の経験では、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'" />
于 2008-09-15T15:52:50.770 に答える
0 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

それをヘッダーに入れて、バグのいくつかを修正する必要があります。

于 2008-09-15T15:56:47.657 に答える
0

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;
}
于 2008-09-15T15:45:54.500 に答える
0

境界線の代わりに背景を使用してみてください。

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

于 2008-09-15T15:52:43.967 に答える