时间戳

首页 > 解决方案 > 如何将鼠标悬停在文本上（稍后是链接）并在其旁边显示图像和文本

html - 如何将鼠标悬停在文本上（稍后是链接）并在其旁边显示图像和文本

问题描述

我有一个简单的网页，底部有“站点地图”，几周或几个月内不会实施，我正在开发其余部分。

所以，“站点地图”需要是一个带有“href=”（？）的链接（我想），我以后可以在其中添加一个链接？悬停时，我需要显示“即将推出”的文字，以及两侧的图像，即

（悬停前）

网站地图

（悬停后）

网站地图即将推出

图片和弹出的文字之间应该有一点空间。

 #my_map:hover:after {
    	margin-left: 20px;
    	color: green;
    	content: "(Coming Soon)";
    }
    <h1>Before and After Tag Example</h1>
    
    <p id="my_map">Site Map</p>
    
    <p><a HREF= "menu.html">Go back to Main Menu</a></p>
    
    <span> <img src="lightening_bolt" alt="bolt" height="20" width="20";> coming soon <img src="lightening_bolt" alt="bolt" height="20" width="20";> </span>
    
    <p style "margin-top: 50px;">Hover over Site Map... </p>

上面不允许图像，只是内容=一些文本，我为找到一些代码想法所做的所有搜索似乎都是为了其他目标......

标签： htmlcss

解决方案

您可以使用 url() 属性将图像添加到 :after 伪元素的内容中。如果您想要文本和图像，则需要将它们串在一起而没有空格。如果您希望图像和文本之间有空格，请确保在文本字符串中包含空格。下面的片段显示了放置在字符串之前和之后的图像。

注意：图像需要一两秒钟才能加载。

var myMap = document.getElementById("my_map2");
var comingSooon = document.getElementById("my_map2");
//
myMap.addEventListener("mouseover", function() {
  cs.innerHTML = "<img src='https://picsum.photos/200' height='15' width='40' /> (Coming Soon) <img src='https://picsum.photos/200'  height='15' width='40' />";
}, false);
//
myMap.addEventListener("mouseout", function() {
  cs.innerHTML = "";
}, false);
#my_map:hover:after {
  margin-left: 20px;
  font-size: 20px;
  color: green;
  content: url("https://picsum.photos/20")" (Coming Soon) "url("https://picsum.photos/20");
}
<p id="my_map"><a href="#">Site Map</a></p>

<p><a href="#" id="my_map2">Site Map 2</a> <span id="cs"></span></p>

推荐阅读