लिंक होवर सीएसएस

पर छवि बनाएं, मैं इस सरल समाधान के साथ काम कर रहा हूं, लेकिन मुझे इस विशिष्ट समस्या से संबंधित स्टैक ओवरफ्लो या इंटरनेट पर कोई सहायता नहीं मिली।लिंक होवर सीएसएस

मेरे पास एक मेनू है, और मैं लिंक के नीचे एक छवि दिखाना चाहता हूं या जब आप इसे होवर करते हैं तो बंद करें। मुझे उम्मीद है कि यह सीएसएस में किया जा सकता है। यह अब तक मेरा कोड है।

एचटीएमएल

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

और यह सीएसएस अब तक है:

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

आशा है कि आप लोग मेरी मदद कर सकते हैं!

स्रोत

2013-10-09 Jacob

मेरे लिए ठीक काम कर रहा है? [fiddle] (http://jsfiddle.net/venkateshwar/wW8aW/) –

इससे निपटने के लिए स्वच्छ रास्ता :after छद्म तत्व का उपयोग करने के

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

तुम भी छवि की जरूरत नहीं है डोम में उपस्थित होने के लिए है।
यह भी याद रखें कि छवि का पथ सीएसएस फ़ाइल के सापेक्ष होगा, न कि HTML फ़ाइल।

बेशक, छवि एंकर के नीचे की सामग्री के नीचे पुश करेगा। इससे बचने के लिए आप कोशिश कर सकते हैं:

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 */ 
}

स्रोत

2013-10-09 11:27:54 matewka

आपको बहुत बहुत धन्यवाद, यह पूरी तरह से काम करता है! – Jacob

लेकिन यह फ़ायरफ़ॉक्स – tnkh

@tnkh के लिए काम नहीं करेगा क्या आप यह बता सकते हैं कि इस उदाहरण का कौन सा हिस्सा फ़ायरफ़ॉक्स में आपके लिए काम नहीं करता है? – matewka

भीतर href छवि डालने और की एक शैली देने की कोशिश करो 'प्रदर्शन: कोई नहीं'

तब:

a:hover img{ display: block; }

जब

स्रोत

2013-10-09 11:22:55

यह _could_ ['एसईओ'] (http://en.wikipedia.org/wiki/Search_engine_optimization) के साथ समस्याएं पैदा करता है। एंकरों को एक सेट ऊंचाई देने से यह अप्रचलित हो जाएगा और अधिक एसईओ अनुकूल होगा। –

पर मँडरा के लिए यही छवि प्रदर्शित करना चाहिए पृष्ठभूमि-छवि आपको एंकर को चौड़ाई, ऊंचाई (या प्रासंगिक पैडिंग) देने और इसे ब्लॉक के रूप में प्रदर्शित करने की आवश्यकता है।

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

स्रोत

2013-10-09 11:23:44 Dale

लिंक होवर सीएसएस

उत्तर

संबंधित मुद्दे