Wie kann ich ein Problem in IE zu beheben, wo Grenzen nicht zeigen, wenn die Maus nicht über ein Bild schwebte wird

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

  •  09-06-2019
  •  | 
  •  

Frage

Ich versuche, eine ziemlich einfache Wirkung auf einer Reihe von Bildern zu erstellen. Wenn ein Bild nicht mit der Maus über sie hat, würde Ich mag es, eine einfache, graue Grenze haben. Wenn es ein Bild über es hat, ich möchte es eine andere haben „ausgewählt“, Grenze.

Das folgende CSS funktioniert gut in Firefox: 

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

Doch in IE, Grenzen nicht angezeigt, wenn die Maus nicht auf das Bild schwebt wird. Mein Google-Fu sagt mir, es ist ein Fehler in IE ist, das dieses Problem verursacht. Leider kann ich nicht scheinen, einen Weg zu finden, die Fehler zu beheben.

War es hilfreich?

Lösung

Versuchen Sie eine andere Farbe. Ich bin nicht sicher IE versteht ‚grauen‘ (verwenden Sie stattdessen ‚graue‘).

Andere Tipps

Die folgenden Werke in IE7, IE6 und FF3. Der Schlüssel war, eine verwenden: link: hover. IE6 drehte das A-Element in einem Blockelement, weshalb ich den Schwimmer Sachen hinzugefügt, um die Inhalte einschweißen.

Beachten Sie, dass es in Standard-Modus ist. Dont‘weiß, was im Quirks-Modus passieren würde. 

<!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>

Nach meiner Erfahrung hat IE funktioniert gut nicht mit Pseudoklassen. Ich denke, der universellste Weg zu handhaben ist Javascript zu verwenden, um die CSS-Klasse auf das Element anzuwenden.

CSS: 

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

Inline Javascript: 

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

Versuchen Sie es mit der Hintergrund statt der Grenze .

Es ist nicht das gleiche, aber es funktioniert in IE (werfen Sie einen Blick auf die Speisekarte auf meiner Website: 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]-->

setzen, dass in der Kopfzeile, sollten einige der also Fehler beheben.

IE hat Probleme mit der: pseudo-Klasse auf etwas anderes als Ankerelemente schweben, so dass Sie das Element ändern müssen das Schweben auf den Anker wirkt sich. Also, wenn Sie eine Klasse wie „Bild“ hinzugefügt, um Ihren Anker und verändert Ihr Markup etwas wie folgt aus: 

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

Sie könnten dann ändern Sie Ihre CSS wie folgt aussehen: 

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

Welche sollte die gewünschte Wirkung nachahmen, indem die Grenze auf dem Anker statt des Bildes platzieren. Nur als Anmerkung, können Sie so etwas wie die folgenden in Ihrem CSS müssen das Image des Standardrahmen zu beseitigen: 

.myImage a img {
    border: none;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top