将鼠标悬停在 link 上时，如何创建一个包含两列的弹出框？

Question

大家好 :) 我正在创建一个网站，我想创建一个确定大小的弹出框，当鼠标悬停在 link 上时会显示两列。在左栏中是图像，在右栏中是带有 link 的文本。我该如何使用 preferebly CSS?

谢谢！

Answer 1

您可以使用 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>

Answer 2

.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>

将鼠标悬停在 link 上时，如何创建一个包含两列的弹出框？

How to create a pop-up box with two columns when hovering over a link?

html

css

popup

hover

box