Question

我需要一个仅限CSS的解决方案，以便在框中的任何位置链接到Stackoverflow，但无论如何都会在鼠标上显示我的.title元素的标题。如果我设置标题position: relative，给它一个比我的锚更高的z-index并设置pointer-events: none，我只看到我的锚的标题。那么如何在我的包装器中有一个完全可点击的锚点，但是看到我的.title元素的标题没有更改我的标记？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

查看CodePen。

在HTML中为您的包装器添加WHERE和data-tooltip属性，并在CSS中随意设置样式。将data-tooltip-position添加到标题属性中，因为我们希望使用自定义的工具提示覆盖它。

HTML：

display:none

CSS：

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

<强> 2。更改主播的标题

修改锚点的.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; }以等于div的标题。

HTML：

title

第3。为包装器分配标题

不要将<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>属性分配给title类，而是将其放在包装器上。

.title

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

1 个答案: