时间戳

首页 > 解决方案 > 带有鼠标悬停文本的可链接图像

html - 带有鼠标悬停文本的可链接图像

问题描述

当我鼠标悬停时，我想让这个可链接的图像在弹出框中有一个文本（不是 w3schools 上的弹出类型，我想要一个经典的黄色框）。我试着这样做

<div class="folder1"> 
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>  
</div>

在链接中打开页面效果很好，但是当我将鼠标悬停在它上面时没有弹出框。有什么帮助吗？

标签： htmlcssimagehyperlinkpopup

解决方案

目前，您正在设置title属性以在元素悬停时获取工具提示类型提示。如果这是您想要做的，但也许只是将文本框设置为黄色，我建议使用以下内容：

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data]:hover:after {
  content: attr(data);
  padding: 4px 8px;
  color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 2;
  border-radius: 5px ;
  background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>

上面的代码由Peeyush Kushwaha在这篇文章中提供。只需将锚标记更改为您的图像标记，然后应用您认为合适的样式。

如果通过“弹出”您正在寻找需要交互关闭的用户警报，您可以window.alert('text')在 javascript 中与onmouseover事件处理程序一起使用。

<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>

否则，如果您正在寻找在图像鼠标悬停时显示的另一个元素，您可以使用一些 javascript 在 img 鼠标悬停时显示 div 或段落（实际上是任何东西）。

function showDiv() {
  document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
  display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>

推荐阅读