Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<html> <body> <div class="product"> <div class="img" data-src="http://ctrlv.cz/shots/2014/11/29/4Wi0.png" style=""> <a href="/koupit-96858.html" target="_blank" rel="nofollow"></a> </div> </div> <div class="product"> <div class="img" data-src="http://ctrlv.cz/shots/2014/11/29/pxxd.png" style=""> <a href="/koupit-96858.html" target="_blank" rel="nofollow"></a> </div> </div> <div class="product"> <div class="img" data-src="http://ctrlv.cz/shots/2014/11/29/pxxd.png" style=""> <a href="/koupit-96858.html" target="_blank" rel="nofollow"></a> </div> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://raw.github.com/eisbehr-/jquery.lazy/master/jquery.lazy.min.js"></script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.hover-product { background-image: url(http://ctrlv.cz/shots/2014/11/29/k9r2.png), url(http://ctrlv.cz/shots/2014/11/29/zjDb.png); background-repeat: no-repeat, repeat; background-position: center; } .product { position: relative; margin: 20px 0px 20px 0px; background-color: white; display: block; margin-left: auto; margin-right: auto; max-width: 290px; min-width: 270px; border: solid 1px #414141; border-bottom: solid 2px #414141; } .product.marked { border: solid 2px #ef5549; border-bottom-color: #eb291a; box-shadow: 0px 1px 7px 1px rgba(235, 041, 026, 0.8); } .product .img { position: relative; width: 100%; height: 220px; background-repeat: no-repeat; background-color: #414141; background-size: 100%; background-position: center; } .product .img a { color: #2dde99; width: 100%; height: 220px; display: block; } .product .img a:hover { background-image: url(http://ctrlv.cz/shots/2014/11/29/k9r2.png), url(http://ctrlv.cz/shots/2014/11/29/zjDb.png); background-repeat: no-repeat, repeat; background-position: center; }
CSS
Autoformát
CSS reset
Až na konci
jQuery(document).ready(function() { jQuery("div.img").lazy({ delay: 2000 }); }); $( ".product h2 > a, .product .visit > a > span" ).hover( function() { $(this).parents('.product').children('.img').children('a').addClass("hover-product"); }, function() { $(this).parents('.product').children('.img').children('a').removeClass("hover-product"); } );
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>