Miért nem működik (A kód lent, html, css, js)?
<html>
<head>
<title>Három kép teszt</title>
<style>
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<script>
$('.fader').hover(function() {
$(this).find("img:last").fadeToggle();
});
</script>
<div class="fader">
<img src="http://placehold.it/300x300/000fff" />
<img src="http://placehold.it/300x300/fff000" />
</div>
</body>
</html>
válasza: válasza:Mert a jsFiddle tudja, hogy bele kell rakni a jQuery include-ot, de csak egy HTML fájlból a böngésző nem találja ki. Meg. Kell. Neki. Mondanod.
Tegyél egy ilyet a <head>-be:
<script type="text/javascript" src=" [link]
válasza: válasza:Hmmm... fura. jsFiddle-ben megy, saját külön HTML-ből nem, nálam se. Pedig a jsFiddle HTML kódját mentettem ki egy-az-egyben.
Viszont az megoldotta a gondot, hogy nem távoli szerverről kéri le a JS-t (valamiért ez nem megy a Chrome-nak, nem is értem), hanem lementettem a JS fájlt és azt include-oltam. Így csodaszépen műxik. :)
<script src="jquery.min.js"></script>
válasza: válasza:megy 1.10-es jqueryvel is, igen.
a .fader-hez nem árt hozzáadni egy position: relative; értéket, különben a fedőkép nem hozzá lesz abszolút pozícióban.
Egyébként ezt js nélkül is meg lehet csinálni, bár ahhoz css3 kell (transition effect):
<html>
<head>
<title>Három kép teszt</title>
<style>
.fader {
position: relative;
display: inline-block;
width: 300px;
height: 300px;
background-image: url(" [link]
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
}
.fader:hover {
background-image: url(" [link]
}</style>
</head>
<body>
<div class="fader"></div>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!