Przeglądając galerie zdjęć dostępnych w Internecie z pewnością zetknęliście się z przypadkiem, kiedy po najechaniu na jakiś obrazek rozświetla się on, bądź odwrotnie, inne stają się ciemniejsze od tego wskazanego kursorem. Efekt ten można osiągnąć stosując standardowy pseudoselektor :hover dostępny w CSS. Jest to jednak metoda pozbawiona dynamicznego przejścia obrazka ze stanu A w stan B. Aby poprawić ten efekt, można posłużyć się prostym skryptem w jQuery.
Standardowa metoda w CSS
Ustawmy w dokumencie testowy obrazek i nadajmy mu klasę „obrazek„. Standardowo przypiszmy mu własność opacity z wartością 0,5. Po jego najechaniu (:hover) zmieńmy tę wartość na 1. Tym sposobem otrzymamy prosty przykład rozjaśnienia obrazka po jego najechaniu.
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<style type="text/css">
.obrazek {
opacity: 0.5;
}
.obrazek:hover {
opacity: 1;
cursor: pointer;
}
</style>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
To samo, ale w jQuery
Do wykrycia zdarzenia przyda nam się funkcja hover(). Tak jak w poprzednim przykładzie, po najechaniu obrazka kursorem myszy, zmienimy wartość własności opacity z 0.5 na 1. Z tą jednak różnicą, że dynamicznie.
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.obrazek').css('opacity', 0.5);
$('.obrazek').css('cursor', 'pointer');
$('.obrazek').hover(function() { //kursor wchodzi
$(this).stop().animate({'opacity': 1}, "slow");
},function() { //kursor wychodzi
$(this).stop().animate({'opacity': 0.5}, "slow");
});
});
</script>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
To samo, ale na odwrót
Przydatna może okazać się także potrzeba przyciemnienia wszystkich obrazków, oprócz tego najechanego.
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.obrazek').css('cursor', 'pointer');
$('.obrazek').hover(function() { //kursor wchodzi
$('.obrazek').stop().animate({'opacity': 0.5}, "slow");
$(this).stop().animate({'opacity': 1}, "slow");
},function() { //kursor wychodzi
$('.obrazek').stop().animate({'opacity': 1}, "slow");
});
});
</script>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
21 października 2012 dnia 16:15
A co powiesz na :hover + transitions w CSS? 😉
21 października 2012 dnia 16:16
Powiem, że to całkiem niezły pomysł 🙂
14 listopada 2012 dnia 14:07
Myślę, że jest to wręcz doskonały pomysł, korzystam z tego sposobu od jakiegoś czasu.
20 maja 2014 dnia 10:49
Fajny pomysł 🙂 a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis?
20 stycznia 2016 dnia 11:47
a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis? jak się taki efekt nazywa?
20 stycznia 2016 dnia 17:04
Tutaj także można zastosować hover(), jednak należy dopisać osobny kontener na tekst, który będzie się pojawiać na obrazku