使图像出现在链接悬停css上

2022-01-22 00:00:00 image hyperlink hover css

我正在使用这个可能很简单的解决方案，但我在 stackoverflow 或与此特定问题相关的互联网上找不到任何帮助.

I am working with this, probably simple solution, but I couldn't find any help on stackoverflow or the internet relating to this specific problem.

我有一个菜单，我想让图片显示在链接下方或当您将鼠标悬停在其附近时.我希望这可以在 CSS 中完成.这是我目前的代码.

I have a menu, and I want to make an image appear under the link or close by when you hover over it. I hope this can be done in CSS. This is my code so far.

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

希望大家能帮帮我！

推荐答案

干净的处理方法是使用 :after 伪元素

The clean way to deal with it is to use :after pseudo element

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

您甚至不需要图像出现在 DOM 中.
还要记住，图像的路径将相对于 CSS 文件，而不是 HTML 文件.

You don't even need the image to be present in the DOM.
Also remember that the path to the image will be relative to the CSS file, not the HTML file.

当然，图片会下推锚点下方的内容.为避免这种情况，您可以尝试:

Of course, the image will push down the content below the anchor. To avoid this you can try:

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

相关文章