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

Question

我想让这张 link 可用的图像在鼠标悬停时在弹出框中显示文本（不是 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>

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

Answer 1

目前，您正在设置 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 in this post提供。只需将锚标记更改为您的图像标记，然后应用您认为合适的样式。

如果 'popup' 您正在寻找需要交互才能关闭的用户警报，您可以将 javascript 中的 window.alert('text') 与 onmouseover 结合使用事件处理程序。

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

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

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>

Answer 2

您可以简单地使用 CSS 来完成此操作，或者您可以使用许多简单的 'tooltip' JavaScript 选项之一。 Bootstrap 例如有这个 tooltip functionality built-in，可以使用。如果您想要一些基本的东西，这里有一个简单的 CSS-only 方法，您可以根据自己的需要进行自定义：

<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->    
<div class="folder1" style="padding: 200px;">
  <a href="yourlinkhere" target="_self" class="popper">
    <img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
    <span class="pop-up">This is some text I want to display.</span>
  </a>  
</div>

<style>
  a.popper {
    display: inline-block;
    position: relative;
  }

  .pop-up {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: 1rem 1.5rem;
    background: yellow;
    color: black;
  }

  a.popper:hover .pop-up,
  a.popper:focus .pop-up {
    display: block;
  }
</style>

基本上，你相对定位 a 标签，这样它就可以绝对定位 children，然后依靠 a:hover 你显示/隐藏 child 使用child 元素的 display 属性.

Answer 3

你同样可以尝试使用 css 伪元素

a{
  position: relative;
}



a:hover:after{
  display:block;
  content: "This is some text I want to display";
  width: 200px;
  background: yellow;
  position: absolute;
  top:0;
  padding: 20px;
}

<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>

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

linkable image with a mouseover text

html

css

image

popup

hyperlink