Question

当输入获得焦点时，我会显示工具提示。此工具提示是一个范围：隐藏，但在输入具有焦点时显示（通过CSS）。

＆＃13;

input + .k-comments {
      display: none;
      max-width: 25em;
      color: #FFF;
      background: #283135;
      padding: 0.3rem;
      margin-top: 0.3rem;
      animation: appearance 2s forwards;
    }

    input:focus + .k-comments {
      display: block;
    }

＆＃13;

<input id="myid" type="text"/>
<span class="k-comments">foo <a href="www.google.com">a link</a></span>

＆＃13;

如果我点击工具提示（或其他任何地方），它就会消失：确定。
问题：我的工具提示包含文字和链接 - ＆gt;我无法点击链接，因为工具提示会先消失。

Answer 1

可能不是最好的解决方案，但至少它可以使链接可点击：

input:focus + .k-comments,
.k-comments:active {
    display: block;
}

Answer 2

input + .k-comments {
  visibility: hidden;
  opacity: 0;
  max-width: 25em;
  color: #FFF;
  background: #283135;
  padding: 0.3rem;
  margin-top: 0.3rem;
  transition: all 2s linear;
}

input:focus + .k-comments {
  visibility: visible;
  opacity: 1;
  transition: none;
}

我的解决方案：为评论添加隐藏的转换。

在输入焦点上显示的div上添加一个链接

2 个答案: