Question

当鼠标悬停在鼠标上方时，我想使此可链接的图像在弹出框中具有文本（而不是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>

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

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在this post中提供。只需将锚标签更改为图像标签，然后根据需要应用样式。

如果通过“弹出式窗口”向需要交互的用户寻找警报，则可以将JavaScript中的window.alert('text')与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>

Answer 2

您可以使用CSS轻松完成此操作，也可以使用许多简单的“工具提示” JavaScript选项之一。例如，Bootstrap具有内置的tooltip functionality，可以随时使用。如果您需要基本的东西，这是一种仅用于CSS的简单方法，可以根据需要进行自定义：

<!-- 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标记相对放置，以便它可以绝对定位子代，然后依靠a:hover使用子元素的display属性显示/隐藏子代。< / p>

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>

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

3 个答案: