li 鼠标悬停/悬停文本块答案

【问题标题】：li mouseover/ hover text blockli 鼠标悬停/悬停文本块
【发布时间】：2016-07-09 18:22:41
【问题描述】：

我正在尝试获得像这样的响应式鼠标悬停，但不幸的是它会创建一个大盒子。这里有什么问题？拼图也应该居中，我也不知道如何。试了这么多-.-

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

【问题讨论】：

标签： css hover html-lists

【解决方案1】：

试试这个

#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;
  }

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

希望这会有所帮助...

【讨论】：