html - 显示元素的标题但通过点击

Question

我需要一个纯 CSS 解决方案来链接到框中任何位置的 Stackoverflow，但无论如何在鼠标悬停时显示我的 .title 元素的标题。如果我设置标题 position: relative，给它一个比我的 anchor 更高的 z-index 并设置 pointer-events: none，我只会看到我的 anchor 的标题。那么我怎样才能在我的包装器中有一个完全可点击的 anchor ，同时看到我的 .title 元素的标题而不更改我的标记？

.wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: #4444ff;
}

.title {
    height: 100px;
    font-size: 24px;
    text-align: center;
    background-color: #4466ff;
}

a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div class="wrapper">
  <div class="title" title="This is a shortened String">This is a shortened Stri...</div>
  <a title="visit Stackoverflow" href="https://stackoverflow.com"></a>
</div>

Answer 1

我不知道在不更改标记的情况下实现它的方法，但这里有一些可能的解决方案:

<强>1。自定义工具提示

查看 CodePen .

将 data-tooltip 和 data-tooltip-position 属性添加到您的 HTML 包装器中，并在 CSS 中根据您的喜好设置样式。将 display:none 添加到您的 title 属性，因为我们想用我们自定义的工具提示覆盖它。

HTML:

<div class="wrapper" data-tooltip="This is a shortened String" data-tooltip-position="top">
  <div class="title">This is a shortened Stri...</div>

  <a title="Stackoverflow" href="https://stackoverflow.com"></a>
</div>

CSS:

.wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    background-color: #4444ff;
}

.wrapper title {
  display: none;
}

.title {
    height: 100px;
    font-size: 24px;
    text-align: center;
    background-color: #4466ff;
}

a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: lightgray;
    color: black;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */

[data-tooltip-position="top"]:before {
    bottom: 50%;
    margin-bottom: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */

[data-tooltip-position="top"]:after {
    bottom: 50%;
    border-width: 6px 6px 0;
    border-top-color: lightgray;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

<强>2。更改 anchor 的标题

修改 anchor 的 title 使其等于 div 的标题。

HTML:

<div class="wrapper">
  <div class="title" title="This is a shortened String">This is a shortened Stri...</div>
  <a title="This is a shortened String" href="https://stackoverflow.com"></a>
</div>

<强>3。为包装器分配标题

不是将 title 属性分配给您的 .title 类，而是将其放在您的包装器中。

<div class="wrapper" title="This is a shortened String">
  <div class="title">This is a shortened Stri...</div>
  <a href="https://stackoverflow.com"></a>
</div>