[CSS] właściwość 'content' nie podmienia obrazka w Internet Explorer :-(

pytanie zadane 27 lipca 2015 w HTML i CSS przez Sebastian Fojcik Nałogowiec (43,040 p.)

Nie będę się dużo rozpisywał, bo przykładowa strona, którą napisałem dla Was wyjaśnia wszystko. Problem polega na tym, że po najechaniu myszką na obrazek powinien się on podmienić na inny. Tak się dzieje w Operze, ale w IE 11 nie. Przetestujcie to na swoich przeglądarkach.

Byćmoże da się zrealizować ten sam efekt w nieco inny sposób? Dziękuję i pozdrawiam.

Link do stronki (1 plik HTML i 2 obrazki): http://speedy.sh/SPH9U/strona.zip

2 odpowiedzi

odpowiedź 27 lipca 2015 przez Eimens Maniak (69,240 p.)

Na upartego tak właśnie można to zrobić, jest też druga opcja, która wygląda następująco :)

http://codepen.io/ReVieR/pen/BNqgeO

komentarz 27 lipca 2015 przez Sebastian Fojcik Nałogowiec (43,040 p.)

Przekształciłem trochę tamten kod, aby podmieniał obrazek na obrazek. Niestety mnie interesuje ułożenie w lini 4 obrazków, gdzie po najechaniu na jakiś podmieni się na inny. Ze sposobem, który podałeś nie jestem w stanie ich ułożyć w jednej linii. Ze względu na nieszczęsny "position: absolute" wydaje się to niemożliwe.

A nawet jeśli jest, to i tak już zaczyna to być zbyt skomplikowane jak na taką prostą czynność - podmiana obrazka.

odpowiedź 27 lipca 2015 przez Comandeer Guru (607,060 p.)

Jeśli nie podmienia, to znaczy, że nie jest do końca zgodny ze specyfikacją CSS3 i należałoby zgłosić błąd.

To, czego szukasz, to tzw. efekt rollover: http://roberto.ovh.org/html-css/rollover.html

Albo jeszcze lepiej zrobić to tak, jak na mojej domowej - z css sprites. Kod dostępny tutaj: http://codepen.io/Comandeer/pen/MwPNyw
Trik polega na tym, że łączy się dwa obrazki w jeden i przesuwa o wysokość jednego (wówczas pokazuje się drugi).