Come posso risolvere un problema in IE, dove i confini non sono visibili quando il mouse non è aleggiava un'immagine

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

  •  09-06-2019
  •  | 
  •  

Domanda

Sto cercando di creare un semplice effetto su un set di immagini.Quando un'immagine non ha il mouse su di esso, mi piacerebbe avere un semplice, bordo grigio.Quando non si dispone di un'immagine su di esso, mi piacerebbe avere un diverso, "selezionato", di confine.

Il seguente CSS funziona alla grande in Firefox:

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

Tuttavia, in IE, i bordi non vengono visualizzati quando il mouse non si librava sopra l'immagine.Il mio Google-fu mi dice che c'è un bug in IE che è la causa di questo problema.Purtroppo, non riesco ad individuare un modo per risolvere il bug.

È stato utile?

Soluzione

Provare a utilizzare un colore diverso.Io non sono sicuro di IE comprende il "grigio" (utilizzare, invece, 'grigio').

Altri suggerimenti

Le seguenti opere in IE7, IE6, e FF3.La chiave è quella di utilizzare un:link:hover.IE6 trasformato Un elemento in un elemento di blocco che è il motivo per cui ho aggiunto il galleggiante roba per termoretraibile i contenuti.

Nota che in modalità Standard.Non sapevo cosa sarebbe successo in quirks mode.

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

Nella mia esperienza IE non funziona bene con le pseudo-classi.Penso che il modo universale per gestire questa situazione è quello di utilizzare Javascript per applicare la classe CSS per l'elemento.

CSS:

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

Javascript Inline:

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

Provare a utilizzare il sfondo invece di confine.

Non è la stessa cosa ma funziona in IE (date un'occhiata al menu sul mio sito: 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]-->

mettere in intestazione, dovrebbe correggere alcuni bug di ie.

IE ha problemi con la pseudo-classe :hover su qualcosa di diverso ancoraggio di elementi di cui è necessario cambiare l'elemento hover colpisce l'ancoraggio stesso.Così, se si aggiunge una classe come "immagine", per l'ancoraggio e l'alterazione di markup per qualcosa di simile a questo:

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

È quindi possibile modificare il CSS in questo modo:

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

Che dovrebbe simulare l'effetto desiderato, inserendo il confine con l'ancoraggio al posto dell'immagine.Solo come nota, potrebbe essere necessario qualcosa di simile al seguente nel tuo CSS per eliminare l'immagine di default di confine:

.myImage a img {
    border: none;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top