可链接的图像与鼠标覆盖文本

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

您可以简单地使用CSS，也可以使用许多简单的“工具提示”JavaScript选项之一。例如，引导程序有这个内置的工具提示功能，可以使用。如果你想要一些基本的东西，这里有一个简单的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属性显示/隐藏子元素。

Answer 2

目前，您正在设置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在这个职位中提供。只需将锚标记更改为图像标记，并按您认为合适的方式应用样式即可。

如果通过“弹出”向用户寻找需要交互才能关闭的警报，则可以在javascript中与onmouseover事件处理程序一起使用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 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>

​