Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]ustawienie :hover dla img
Forum PHP.pl > Forum > Przedszkole
Contritio
26.04.2014, 18:47:59
Witam serdecznie

Mam problem z deiniowaniem :hover do elementu img w divie, chcę aby każdy z pojedyńczych elementów zmieniał się, typu gdy najadę na np "facebook" ikonkę to wówczas załaduje mi się inny img. Dodatkowo zupełenie nie chce mi wskoczyć background hover'a który mam w pliku css. Proszę o pomoc.


Kod
<div id="top">
    
             <div id="icon">
             <a href="index.html"><img class="facebook" src="img/facebook1.png" alt="facebook" height="40" width="40"></img></a>
             <a href="index.html"><img class="twitter" src="img/twitter.png" alt="twitter" height="40" width="40"></img></a>
             <a href="index.html"><img class="google" src="img/google.png" alt="google" height="40" width="40"></img></a>
             </div>



Kod
#icon {
     float:right;
     min-height:200px;
     min-width:100px;    
     }
      
     #icon img {
          margin:15% 10px 10px 10px;
     }
    
     #icon .facebook a:hover img {
     background: url(img/facebook.png);
     border:1px solid #CC9900;
     }
trueblue
26.04.2014, 18:50:55
Ale Ty zmieniasz background, a nie src.
Wyrzuć <img> i zmieniaj background <a>:
[HTML] pobierz, plaintext 
  1. #icon .facebook a:hover{
  2.      background: url(img/facebook.png);
  3.      border:1px solid #CC9900;
  4. }
[HTML] pobierz, plaintext
Contritio
26.04.2014, 19:01:20
ymmm czyli jak to powinno wyglądac?tongue.gif
trueblue
26.04.2014, 19:09:48 
[HTML] pobierz, plaintext 
  1. <a href="index.html" class="facebook"></a>
  2. <a href="index.html" class="twitter"></a>
  3. <a href="index.html" class="google"></a>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #icon a {
  2.  margin:15% 10px 10px 10px;
  3.  width:40px;
  4.  height:40px;
  5.  display:inline-block;
  6. }
  7.  
  8. #icon a.facebook:hover{
  9.  background: url(img/facebook.png);
  10.  border:1px solid #CC9900;
  11. }
[HTML] pobierz, plaintext
Contritio
26.04.2014, 19:19:07
Zrobiłem dokładnie tak samo i nie wyświetla elementów, ani hover img nie ukazuje, jedynie border. sad.gif
trueblue
26.04.2014, 19:24:20
Jakich elementów nie pokazuje?
<a>? No, nie, bo nie mają domyślnie praktycznie żadnego ostylowania oprócz wymiarów, itp.
Zobacz czy ścieżka do img/facebook.png jest poprawna względem pliku gdzie masz styl css.

Nie wyrzuciłeś czasem tych dwóch divów?
Contritio
26.04.2014, 19:44:34
nie pokazuje ani obrazka w <a> ani po najechaniu myszką na niego czyli :hover

Pokażę dokładnie jak to wygląda


HTML:

Kod
     <div id="top">
            
             <div id="icon">
             <a href="index.html" class="facebook"></a>
             <a href="index.html" class="twitter"></a>
             <a href="index.html" class="google"></a>
             </div>


CSS:

Kod
     #top {
      text-alight: center;
      width: 998px;
      margin: 0 auto;
      height: 100px;
      overflow:hidden;
      font-family: 'PT Sans Narrow', sans-serif;
     }
    
         #icon {
         float:right;
         min-height:200px;
         min-width:100px;    
         }
    
        #icon a {
         margin:15% 10px 10px 10px;
         width:40px;
         height:40px;
         display:inline-block;
        }
        
        #icon a.facebook:hover{
         background: url(img/facebook.png);
         border:1px solid #CC9900;
        }
        
        #icon a.facebook {
        background: url(img/facebook.png);
         margin:15% 10px 10px 10px;
         width:40px;
         height:40px;
        }


Przepraszam, jestem już tak zmęczony, że nie jestem w stanie myśleć, chcę to dokończyć bo już od 6 dni po blisko 10-12h ciupie te kody i głowa mi siada :/
trueblue
26.04.2014, 19:48:21 
[HTML] pobierz, plaintext 
  1. #icon a.facebook{
  2.  background: url(img/facebook1.png);
  3. }
[HTML] pobierz, plaintext

Jeśli taki obrazek ma być dla stanu domyślnego <a>.

I ponawiam pytanie, czy ścieżka w background jest poprawna?
Contritio
26.04.2014, 19:58:59
tak, dokładnie scieżka jest poprawna i pliki są zapisane w formacie .png
Jeszcze upewniłem się i dla porównania sprawdziłem z innej strony podobny przykład jednak tam taki sam element nie miał <a>
trueblue
26.04.2014, 21:04:24
Pokaż obecny kod html oraz css.
Contritio
26.04.2014, 21:21:08
Cytat(trueblue @ 26.04.2014, 22:04:24 ) *
Pokaż obecny kod html oraz css.


Dobra, już sobie z tym poradziłem. Zrozumiałem przyczynę gdyż jak widzę to :hover nie zamieni obrazków a być może jest jakiś na to sposób.

Zmniejszyłem przejrzystość obrazka do 50% i nałożyłem na niego drugi jako hover który ma 100%. Efekt w sumie fajny smile.gif

W każdym razie dziękuje za pomoc, można powiedzieć, że to wszystko
ostrylg
26.04.2014, 21:34:49 
[HTML] pobierz, plaintext 
  1. #top {
  2.       text-alight: center;
  3.       width: 998px;
  4.       margin: 0 auto;
  5.       height: 100px;
  6.       overflow:hidden;
  7.       font-family: 'PT Sans Narrow', sans-serif;
  8.      }
  9.  
  10.          #icon {
  11.          float:right;
  12.          min-height:200px;
  13.          min-width:100px;     
  14.          }
  15.  
  16.         #icon a {
  17.          margin:15% 10px 10px 10px;
  18.          width:40px;
  19.          height:40px;
  20.          display:inline-block;
  21.         }
  22.  
  23.         #icon a.facebook:hover{
  24.          background: url(img/facebook.png);
  25.          border:1px solid #CC9900;
  26.         }
  27.  
  28.         #icon a.facebook {
  29.         background: url(img/facebook.png);
  30.          margin:15% 10px 10px 10px;
  31.          width:40px;
  32.          height:40px;
  33.         }
[HTML] pobierz, plaintext


Hover zamieni obrazek ale w tym kodzie na hoverze masz ten sam obrazek co normalnie więc ciężko żeby się coś zmieniło
Turson
26.04.2014, 21:37:32
yyy http://jsfiddle.net/469hw/
Contritio
26.04.2014, 21:55:31
eee

Dobra, idę spać, coś ze mną dzisiaj serio nie tak wacko.gif

Dzięki za pomoc w każdym razie
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.