文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将鼠标悬停在文本(后来是一个链接)上并显示其旁边的图像和文本

问如何将鼠标悬停在文本(后来是一个链接)上并显示其旁边的图像和文本
EN

Stack Overflow用户

提问于 2019-06-13 05:17:19

回答 4查看 474关注 0票数 1

我有一个简单的网页与底部的“网站地图”，这将不会实施几个星期或几个月，并正在开发其余的我去。

因此，“站点地图”需要是一个带有"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>

上面不允许图片，只是content=一些文本，并且我所做的所有搜索寻找一些代码想法似乎都是为了其他目标……

html

css

回答 4

Stack Overflow用户

发布于 2019-06-13 05:51:31

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

票数 0

Stack Overflow用户

发布于 2019-06-13 06:58:40

你也可以把图片放在那里，然后把它隐藏起来，直到锚点悬停在上面：

#map-link {
  display: inline-block;
}

#hidden-message {
  display: none;
  transition: display 1s linear;
}

#map-link:hover+#hidden-message {
  display: block;
}

#cmg-soon-img {
  margin: 0;
  padding: 0;
  height: 100px;
  width: 100px;
}

<div id="my_map">
  <p id="map-link"><a href="#">Site Map</a></p>

  <div id="hidden-message">
    <img id="cmg-soon-img" src="https://picsum.photos/20">
    <p>
      "Coming soon..."
    </p>
  </div>
</div>

这将允许您控制所显示图像的宽度和高度。

票数 0

Stack Overflow用户

发布于 2019-06-14 03:17:20

<!-- Here's what I got (hope answer my own question doesn't close thread...-->
<!DOCTYPE html>
<html>
<head>

<style>

    #my_map {
        margin-right: 30px;
        font-size: 35px;
        text-decoration: none;
    }

</style>

</head>

<body>

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

    <script>

        var myMap = document.getElementById("my_map");
        var comingSooon = document.getElementById("my_map");

        myMap.addEventListener("mouseover", function() {cs.innerHTML = "<img src='https://picsum.photos/20' height='35' width='35' /> (Coming Soon) <img src='https://picsum.photos/20' height='35' width='35' />";}, false);

        myMap.addEventListener("mouseout", function() {cs.innerHTML = "";}, false);

    </script>    

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56570475

复制

相似问题

问如何将鼠标悬停在文本(后来是一个链接)上并显示其旁边的图像和文本
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将鼠标悬停在文本(后来是一个链接)上并显示其旁边的图像和文本EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将鼠标悬停在文本(后来是一个链接)上并显示其旁边的图像和文本
EN