将鼠标悬停在链接上时如何创建具有两列的弹出框？

Question

大家好：）我正在创建一个网站，我想创建一个确定大小的弹出框，当鼠标悬停在链接上时会显示两列。左栏中是图像，右栏中是带有链接的文本。我如何最好使用 CSS 来做到这一点？

谢谢你！

Answer 1

.container{
  position: relative;
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
.container:hover > .popup{
  visibility:visible;
  opacity:1;
}
.popup{
  visibility:hidden;
  opacity:0;
  position: absolute;
  top: 40px;
  display: flex;
  flex-direction: row;
  width:150px;
  height:50px;
  transition: all .3s;
}
.first-element{
  height: 100%;
  flex-basis: 50%;
  border:1px solid red;
}
.second-element{
  border:1px solid green;
  height: 100%;
  flex-basis: 50%;
}

<div class="container">
  <span>show pop up</span>
  <div class='popup'>
  <div class='first-element'>image element</div>
  <div class='second-element'><a href="#" >link elements</a></div>
  </div>
</div>

Answer 2

您可以使用 onmouseover 和 onmouseout 来完成此操作

.popUp {
  display: none;
}

<a href="#" onmouseover="document.getElementById('popUp').style.display='block'" onmouseout="document.getElementById('popUp').style.display='none'">Something
</a>
<div class="popUp" id="popUp">Hello</div>