CSS :nach hover-Übergang
Den HTML-Struktur
<div id="small_gal">
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
</div>
Werden die Bilder mit Schlagschatten so border
ist keine Lösung, da es außerhalb des Bildes
Ist die Grenze mit übergang und es funktioniert reibungslos auf FF, aber nicht in chrome oder anderen Browsern
Hier ist die code, die ich verwendet habe
#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
content: '';
position: absolute;
width: 112px;
height: 81px;
border: 3px solid #e27501;
left: 9px; top: 9px;
z-index: 9;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
opacity: 1;
}
Hinweis:
#small_gal
ist nur der container
jedes Bild ist verpackt in einem div-so können wir umsetzen :nach
- Sind Sie sicher, dass CSS transitions werden auch umgesetzt in den Browser Sie verwenden? quirksmode.org
- Ja border fade-Effekt funktioniert auf meinem firefox 6. Prüfen Sie oben rechts, 3 links, Sie funktionieren in allen Browsern.
- Nach unten zu Stimmen, weil der link tot ist
- Dein link ist kaputt.
- ja link ist kaputt, ich habe es entfernt und Hinzugefügt, dass andere details
Du musst angemeldet sein, um einen Kommentar abzugeben.
Firefox 4+ ist der einzige browser, der unterstützt den übergang von pseudo-Elementen, wie
:before
und:after
.Quelle: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
CSS-übergänge sind noch experimentell in WebKit, so ist es wahrscheinlich, dass Sie getroffen habe, einige Rand-Fall-bug mit dem ::after-pseudo-Selektor. Ich schlage vor, die Vermeidung es insgesamt und nur den übergang
border-color
statt. Das funktionierte wunderbar, in Chrome und Safari:Können Sie mithilfe von CSS-transitions, die auf pseudo-Elementen wie :before und :after, wenn Sie können, definieren Sie die Eigenschaft auf das element selbst und verwenden
inherit
im pseudo-element. Also in deinem Fall anstatt eines übergangs auf dieopacity
, Sie könnten ein übergang auf dieborder-color
.CSS:
HTML: