使图像出现在链接悬停 css 上 [英] Make image appear on link hover css

查看：27 发布时间：2022/1/2 8:12:01 css image hyperlink hover

本文介绍了使图像出现在链接悬停 css 上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在处理这个，可能是简单的解决方案，但我无法在 stackoverflow 或 Internet 上找到与此特定问题相关的任何帮助.

我有一个菜单，我想让图片出现在链接下方或在您将鼠标悬停在它上面时关闭.我希望这可以在 CSS 中完成.到目前为止，这是我的代码.

HTML

<头><title></title><link rel="stylesheet" type="text/css" href="startpage.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><身体><div id="包装器"><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 piegaard/</div><div id="underheader">作品集</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>

<img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/>

这是目前为止的 CSS:

a:hover{背景图片: url('图片/circle.PNG');背景重复:不重复；}

希望大家帮帮我！

解决方案

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

a:hover:after {内容:网址(图片/圆圈.PNG)；/* 不需要报价 */显示:块；}

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

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

a:hover {位置:相对；}一个:悬停:{内容:网址(图片/圆圈.PNG)；/* 不需要报价 */显示:块；位置:绝对；左:123px；/* 将此值更改为适合您的值 */顶部:56px；/* 将此值更改为适合您的值 */}

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.

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>

And this is the CSS so far:

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

Hope you guys can help me!

解决方案

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

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

这篇关于使图像出现在链接悬停 css 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使图像出现在链接悬停 css 上 [英] Make image appear on link hover css

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使图像出现在链接悬停 css 上 [英] Make image appear on link hover css

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭