li mouseover / hover文本块

Question

我正试图像这样得到一个响应式鼠标悬停，但不幸的是它创造了一个大盒子。这里有什么不对？拼图也应该集中，我也不知道如何。试了这么多 - .-

#mouseover1:hover:after {
    content: "mehr erfahren!";
    position: absolute;
    top: 0; bottom: 0;
    left: 50px; right: 0;
    color: white;
    font-size: 100%;
    font-weight: bold;
    line-height: 110%;
    background: RGBA(0, 51, 204, .5);
    border: 1px solid blue;
    display:flex;
    align-items: center; /* Vertical center alignment */
    text-align: center;
   justify-content: center;
}

<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');">
  <li id="mouseover1">Test 1</li>
  <li id="mouseover2">Test 2</li>
  <li id="mouseover3">Test 3</li>
</ul>

Answer 1

试试这个

＆＃13;

＆＃13;

#mouseover1:hover:after {
    content: "mehr erfahren!";
    position: absolute;
    top: 0; bottom: 0;
    left: 120px; right: 0;
    color: white;
    width:40%;
  height:35%;
    font-size: 100%;
    font-weight: bold;
    line-height: 110%;
    background: RGBA(0, 51, 204, .5);
    border: 1px solid blue;
    display:flex;
    align-items: center; /* Vertical center alignment */
    text-align: center;
   justify-content: center;
}
#mouseover1:hover:before {
  content:"";
  width: 0;
  height: 0;
  position:absolute;
  left:80px;
  top:5px;
  border-top: 25px solid transparent;
  border-right: 40px solid RGBA(0, 51, 204, .5);
  border-bottom: 25px solid transparent;
  }

＆＃13;

<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');">
  <li id="mouseover1">Test 1</li>
  <li id="mouseover2">Test 2</li>
  <li id="mouseover3">Test 3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助......