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

Question

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

因此，“站点地图”需要是一个链接(我假设)与“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>

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

Answer 1

您可以使用 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>