Make image appear on link hover css(使图像出现在链接悬停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 */
}
这篇关于使图像出现在链接悬停css上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使图像出现在链接悬停css上
基础教程推荐
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 动态更新多个选择框 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01