使图像出现在链接悬停css

我正在处理这个，可能很简单的解决方案，但我找不到任何有关此特定问题的计算器或互联网上的帮助。使图像出现在链接悬停css

我有一个菜单，我想让图像显示在链接下，或者当您将鼠标悬停在其上时关闭。我希望这可以在CSS中完成。这是我的代码到目前为止。

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>

这是CSS至今：

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

你甚至都不需要的图像出现在DOM。
还要记住，图像的路径将相对于CSS文件而不是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

但这不适用于firefox – tnkh

@tnkh你能解释一下这个例子的哪部分在Firefox中不适合你？ – matewka

尝试把内在href图像和给人一种风格“显示：无”

然后：

a:hover img{ display: block; }

这对

来源

2013-10-09 11:22:55

这个_could_会导致['SEO']（http://en.wikipedia.org/wiki/Search_engine_optimization）出现问题。给锚定一个高度会使这个过时并且更加SEO友好。 –

徘徊时，对于应该显示的图像背景图像你需要给锚点一个宽度，高度（或相关的填充）并将其显示为一个块。

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

使图像出现在链接悬停css

回答

相关问题