Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]ustawienie :hover dla img
Contritio
post
Post #1





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

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;
     }
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Contritio
post
Post #3





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

ymmm czyli jak to powinno wyglądac?(IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
----- 

[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


Ten post edytował trueblue 26.04.2014, 19:10:00
Go to the top of the page
+Quote Post
Contritio
post
Post #5





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

Zrobiłem dokładnie tak samo i nie wyświetla elementów, ani hover img nie ukazuje, jedynie border. (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Contritio
post
Post #7





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

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 :/

Ten post edytował Contritio 26.04.2014, 19:45:48
Go to the top of the page
+Quote Post
trueblue
post
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
----- 

[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?
Go to the top of the page
+Quote Post
Contritio
post
Post #9





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
trueblue
post
Post #10





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Pokaż obecny kod html oraz css.
Go to the top of the page
+Quote Post
Contritio
post
Post #11





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)

W każdym razie dziękuje za pomoc, można powiedzieć, że to wszystko

Ten post edytował Contritio 26.04.2014, 21:21:28
Go to the top of the page
+Quote Post
ostrylg
post
Post #12





Grupa: Zarejestrowani
Postów: 144
Pomógł: 18
Dołączył: 11.12.2005
Skąd: Gdańsk

Ostrzeżenie: (0%)
----- 

[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
Go to the top of the page
+Quote Post
Turson
post
Post #13





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

yyy http://jsfiddle.net/469hw/
Go to the top of the page
+Quote Post
Contritio
post
Post #14





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.03.2014

Ostrzeżenie: (0%)
-----

eee

Dobra, idę spać, coś ze mną dzisiaj serio nie tak (IMG:style_emoticons/default/wacko.gif)

Dzięki za pomoc w każdym razie
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 30.09.2025 - 09:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn