9 svar · 881 visningar · startad av Vixnor
Vill ha fade på bilder onMouseOver...
<div class="imgcontainer">
<img src="bild1.jpg" class="hoverfade"/>
</div>
CSS:
<style>
.imgcontainer { background-color: white; display: inline-block; }
.imgcontainer img { opacity: 0.8; display: block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<script>
$(function () {
$('img.hoverfade')
.each(function () { $(this).wrap('<div class="imgcontainer"/>'); })
.on('mouseenter', function () { $(this).fadeTo(200, 1); })
.on('mouseleave', function () { $(this).fadeTo(200, 0.8); });
});
</script>
Det funkar i vissa webbläsare, men jag måste få det att fungera i alla.
Finns det någon som har tips på någon lösning?
img.hoverfade {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
-moz-opacity: 0.8;
/* Safari 1.x */
-khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
}
..eller..
$('img.hoverfade').css('opacity':0.8).hover(
function(){
$(this).fadeTo(200, 1);
},function(){
$(this).fadeTo(200, 0.8);
});
Det funkar inte i IE. Men jag har använt jQuery till bildgallerier som fungerar i alla webbläsare, så jag tycker att onMouseOver med fade borde fungera också...
Nate.A´s lösning borde fungera i IE (ren CSS)
Det ända som är fel i jquery koden är att han försökte köra: .css("opacity", 0.8) eller .css({"opacity": 0.8})
Aha, sedär ja! Tack för rättelsen. :)
(att bilden flyttar sig om man använder class="hoverfade" eller ej)
Finns det en css klass som gör det?
Finns det en css klass som gör det?
Vet inte hur det gick till, men på något sätt blev jag av med det.
Men när bilderna ska fadeas "tillbaka" till opacity 0.8, så blir det först mörkare och sen helt plötsligt ljusare (använder vit bakgrundsfärg).
Men när jag använder http://www.webforum.nu/images/wfstandard/logo_webforum.gif fungerar det.
Mina bilder är drygt 210x270 .jpg
Ingen som vet varför bildernas fade blir fel om man använder vit bakgrund?
det är ju inget fel med att köra med vit bakgrund, du få nog posta ett exempel som visar ditt problem, ser inte något konstigt när jag kör mitt exempel
