html - 悬停时显示跨度属性值

Question

我有一个像这样的 HTML:

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

当鼠标悬停在 span 标签的文本上时，如何显示其 ref 属性的值。

Answer 1

您可以使用 title 属性，也可以制作自己的自定义工具提示，如下例所示，在这种情况下，请注意放置工具提示以防止溢出，在 HTML 中您可以添加自定义属性以及从 data- 开始，例如 data-customAttribute CSS 中的属性选择器看起来像这样 [data-customAttribute] {.....} 为了更具体，您可以添加元素 span[data-customAttribute] {..... }

/** Tootip **/
  span[ref]:hover:after {
    opacity: 1;
    transition: all 0.1s ease .5s;
    visibility: visible;
    animation: grow 3s forwards;
}

span[ref]:after {
    content: attr(ref);
    background-color: #00adb5;
    color: #fff;
    position: absolute;
    padding: 1px 5px 2px 5px;
    top: 100%;
    left: 0px;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 3px 3px 5px #00ADB5;
    border: 1px solid rgb(197, 195, 195);
    border-radius: 0 5px 0 5px;
    visibility: hidden;
    z-index: 20;
}

span[ref] {
    position: relative;
}

/* you can ignore the animation it is not mandatory */
@keyframes grow {
    0% {
        transform: scale(0);
    }

    30%, 65% {
        transform: scale(1);
    }

    70%, 100% {
        transform: scale(0);
    }
}

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>