Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z :hover w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
siutek
Witam,
Zrobiłem sobie na stronie diva z Facebookowym boxem.
Div jest schowany za lewą krawędzią okna, a widoczny jest tylko mały "język" z logiem FB. Po najechaniu nad ten "język" całość się wysuwa. Wszystko na CSSie, wysuwanie na :hover.
W każdej przeglądarce to działa doskonale. Niestety gorzej jest z IE.

Po najechaniu na "język" div zachowuje się tak jakbym balansował na krawędzi zmieniając stan hover.
Problem istnieje tylko wtedy gdy poruszam kursorem. Gdy jakimś cudem uda mi się umieścić kursor nad językiem i ani razu nim nie poruszyć, całość działa ok.

HTML:
  1. <div class="fb">
  2. <div class="jezyk"></div>
  3. <div class="fb-like-box" data-href="https://www.facebook.com" data-width="190" data-height="380" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
  4. </div>


CSS:
  1. .fb {
  2. width: 200px;
  3. height: 400px;
  4. position: fixed;
  5. top: 100px;
  6. left: -200px;
  7. background: #ffffff;
  8. text-align: center;
  9. transition-duration: 1.5s;
  10. }
  11. .jezyk {
  12. width: 50px;
  13. height: 50px;
  14. background-color: #3B5998;
  15. background-image: url('../../../../../image/fejs.png');
  16. background-repeat: no-repeat;
  17. background-position: center;
  18. border-radius: 0px 5px 5px 0px;
  19. position: absolute;
  20. top: 0px;
  21. left: 200px;
  22. cursor: pointer;
  23. }
  24. .fb:hover {
  25. left: 0px;
  26. }


Całość umieszczona tu: www.lisek-urwisek.com
sf
Źle działa także pod FF ( chowa się pod resztę strony przy małej rozdzielczości), dodaj z-index do klasy .fb. Może to rozwiąże problem pod IE, jak nie pomoże to jeszcze zamień fixed na absolute.
siutek
Cytat(sf @ 10.04.2014, 12:48:00 ) *
Źle działa także pod FF ( chowa się pod resztę strony przy małej rozdzielczości), dodaj z-index do klasy .fb. Może to rozwiąże problem pod IE, jak nie pomoże to jeszcze zamień fixed na absolute.

Niestety ani z-index, ani position: absolute nie działa.
zauważyłem, że ten problem dotyczy konkretnego obszaru nad ktorym jest kursor. O ile uda mi się przesuwać kursor w tym samym tempie co wysuwanie panelu, utrzymując go stale nad fioletowym jezykiem z logiem FB wszystko jest ok, ale jeśli tylko kursor zjedzie na biały div z panelem fejsa, całość zaczyna głupieć. Czyli jakby IE miało problem z identyfikacją obszaru hovera, mimo, że fizycznie kursor jast nad kontenerem, to przeglądarka myśli co innego.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.