Rendi l'immagine visualizzata sul link hover css

Sto lavorando con questa soluzione, probabilmente semplice, ma non ho trovato alcun aiuto su StackOverflow o Internet relativo a questo specifico problema.Rendi l'immagine visualizzata sul link hover css

Ho un menu e voglio far apparire un'immagine sotto il link o vicino quando passi il mouse su di esso. Spero che questo possa essere fatto in CSS. Questo è il mio codice finora.

HTML

<html> 
    <head> 
     <title></title> 

     <link rel="stylesheet" type="text/css" href="startpage.css"> 


     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
    <div id="wrapper"> 


     <img id="baggrund" width="166" height="327" alt="back image" src="images/laerkeryg.jpg"/> 
     <img id="cirkler" width="319" height="249" alt="circles" src="images/circles.PNG"/> 
     <div id="header">/jacob gerlif pilegaard/</div> 
     <div id="underheader">portfolio</div> 
      <ul> 
      <li><a href="index.html">home</a></li> 
      <li><a href="about.html">about</a></li> 
      <li><a href="gallery.html">gallery</a></li> 
      <li><a href="contact.html">contact</a></li> 
      </ul> 
     </div> 
    <img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/> 
      </body> 
</html>

E questo è il CSS finora:

a:hover 
{ 
    background-image: url('image/circle.PNG'); 
    background-repeat: no-repeat; 
}

Spero che voi ragazzi mi può aiutare!

fonte

2013-10-09 Jacob

sembra funzionare bene per me? [fiddle] (http://jsfiddle.net/venkateshwar/wW8aW/) –

Il modo pulito per affrontare il problema è quello di utilizzare :after pseudo elemento

a:hover:after { 
    content: url(image/circle.PNG); /* no need for qoutes */ 
    display: block; 
}

Non è nemmeno necessario l'immagine di essere presente nel DOM.
Ricorda inoltre che il percorso dell'immagine sarà relativo al file CSS, non al file HTML.

Ovviamente, l'immagine sarà spingere sul contenuto sotto l'ancora. Per evitare questo si può provare:

a:hover { 
    position: relative; 
} 
a:hover:after { 
    content: url(image/circle.PNG); /* no need for qoutes */ 
    display: block; 
    position: absolute; 
    left: 123px; /* change this value to one that suits you */ 
    top: 56px; /* change this value to one that suits you */ 
}

fonte

2013-10-09 11:27:54 matewka

Grazie mille, funziona perfettamente! – Jacob

ma questo non funzionerà per firefox – tnkh

@ tnkh puoi spiegare quale parte di questo esempio non funziona per te in Firefox? – matewka

Prova a mettere l'immagine all'interno il href e dando uno stile di 'display: none'

Poi:

a:hover img{ display: block; }

Questo dovrebbe visualizzare l'immagine quando si libra sulla

fonte

2013-10-09 11:22:55

Questo potrebbe causare problemi con ['SEO'] (http://en.wikipedia.org/wiki/Search_engine_optimization). Dare alle ancore un'altezza impostata renderà questo obsoleto ed è più SEO friendly. –

Per immagine di sfondo è necessario dare all'ancora una larghezza, altezza (o riempimento relativo) e visualizzarlo come un blocco.

a:hover 
{ 
    background-image: url('image/circle.PNG'); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    height:20px 
    width:100px; 
    display:block; 
}

fonte

2013-10-09 11:23:44 Dale

Rendi l'immagine visualizzata sul link hover css

risposta

Problemi correlati