Spis treści:
W tym artykule napiszę jak zrobiłem dymki w CSS na swoim blogu, a dokładniej podczas najechania na przycisk z kciukiem w górę „Fajny” (dymek z tekstem: Podoba mi się!) oraz z kciukiem w dół (dymek z tekstem: Nie podoba mi się!). Jest to banalnie proste i nie trzeba wykorzystywać do tego JavaScriptu. Testowałem dymki na takich przeglądarkach jak: IE6, IE7, IE8, Opera, Chrome, Firefox i wszędzie dymki wyświetlały się poprawnie.
Kod CSS wygląda następująco:
a.balloon_no span {
display: none;
padding: 3px 0 0;
width: 105px;
}
a.balloon_no:hover span{
background: url(images/balloon.png) no-repeat;
color: #FFFFFF;
display: block;
font-size: 11px;
height: 27px;
line-height: 27px;
margin: 28px 0 0 -37px;
position: absolute;
text-align: center;
}
Kod HTML wygląda następująco:
<a class="balloon_no"><span>Podoba mi się!</span></a>
Demko dymków w CSS
Link do Dema: https://pawelmacur.com/dema_css/dymki/index.html
(+9, Głosów: 11)
Loading...
8 komentarzy
Jeżeli faktycznie zrobiłeś to na tym blogu, to na której wersji Opery testowałeś? Na najnowszej nie działa…
A mógłbyś zrobić z tego małe demo (prosty plik HTML) pokazujący efekt działania tych dymków. Bo teraz jakoś nie mogę się połapać.
Na najnowszej testowałem i działa bez zarzutów, więc nie wiem dlaczego u Ciebie dymki nie działają. Może to wina cache.
Oczywiście dymki działają tylko w tych artykułach, w których wcześniej nie głosowałeś.
Demo jest już dostępne.
Dobra, działa – sprawdzałem na tym obrazku na górze ;]
Ok, dzięki za demo. Już wiem co robiłem źle :)
@Wilk
:)
@Pablo
Drobiazg.
Coś podobnego zrobiłem w Java scripcie, ale zrobiłem to dlatego, że nie wiedziałem, że można dymki zrobić w CSS. Przydatna informacja i widzę, że kolejna kategoria dodana na tym blogu :)
Ogólnie to kategorii jeszcze trochę dojdzie: php, prawo itp.