0

我在html中写了一个类似这样的缩写，

  <abbr title="How are you">HAY</abbr>

这段代码仅显示 4 或 5 秒的缩写。这次可以定制吗？？

4

1 回答 1

3

不，这完全由浏览器处理，用户或 Web 开发人员无法更改、读取或编辑可见时间。

您可以使用 JavaScript 创建一个包含属性文本的元素，该title属性的可见性将在您的控制之下。

编辑是因为我想到我应该尝试提供一个替代示例（而不是仅仅说'它们存在'），所以，一个 CSS 示例（我在这个实现中使用 CSS 生成的内容，不幸的是不允许对于 CSS 过渡，它只会出现，并一直保持在原位，直到您从abbr元素上移出鼠标）：

HTML：

<abbr data-title="Cascading Style Sheets">CSS</abbr>​

CSS：

abbr[data-title] {
    position: relative;
    border-bottom: 2px dashed #aaa;
    cursor: help;
}
abbr[data-title]::after{
    display: none;
    position: absolute;
    content: attr(data-title);
    top: 90%;
    left: 90%;
    color: #f90;
    background-color: rgba(0,0,0,0.7);
    padding: 0.4em;
    border-radius: 0.7em;
}
abbr[data-title]:hover::after {
    display: block;
}

JS 小提琴演示。

这确实需要用户拥有一个支持 CSS 生成内容的浏览器，因为如果有一个title属性，您将同时显示CSS 弹出窗口和默认标题，这既不是非常有用也不是特别漂亮。

另一种方法是使用嵌套元素和 CSS 过渡，在那些不支持过渡的浏览器中优雅地降级（内容只是“出现”，但至少它是可用的）：

HTML：

<abbr>CSS<span>Cascading Style Sheets</span></abbr>​

CSS：

abbr {
    position: relative;
    border-bottom: 2px dashed #aaa;
    cursor: help;
}

abbr span {
    position: absolute;
    top: 90%;
    left: 90%;
    padding: 0.4em;
    color: #f90;
    background-color: rgba(0,0,0,0.7);
    border-radius: 0.7em;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

abbr:hover span {
    opacity: 1;
    width: 8em;
    height: 4em;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS 小提琴演示。

还有一种 JavaScript 方法（坦率地说，这有点难看）：

if (document.querySelectorAll) {
    var elems = document.querySelectorAll('[title]');
}
else {
    var firstPass = document.getElementsByTagName('*'),
        elems = [];
    for (var i = 0, len = firstPass.length; i < len; i++) {
        if (firstPass[i].title) {
            elems.push(firstPass[i]);
        }
    }
}

for (var i = 0, len = elems.length; i < len; i++) {
    elems[i].onmouseover = function(e) {
        // cache variables for subsequent use:
        var that = this,
            helpText = this.getAttribute('data-title') || this.title;
        // create a useable attribute and stop the original title from showing up,
        // if the attribute to use doesn't already exist:
        if (!that.getAttribute('data-title')) {
            that.setAttribute('data-title', helpText);
            that.removeAttribute('title');
        }
        // create an element to contain the popup-text or find the
        // already-created element if it already exists:
        var id = helpText.replace(/(\W)/g, ''),
            popup = document.getElementById(id) || document.createElement('div');
        // setting the id to its own id (if it already existed)
        // or, if it's newly-created, to the white-space-removed help-text
        popup.id = popup.id || id;
        // creating a text-node for the help-text:
        var text = document.createTextNode(helpText);
        // appending that text-node to the popup if that text node doesn't already exist:
        if (!popup.firstChild) {
            popup.appendChild(text);
        }
        // setting the styles (adjust to taste):
        popup.style.display = 'block';
        popup.style.color = '#f90';
        popup.style.backgroundColor = '#000';
        popup.style.position = 'absolute';
        popup.style.top = that.offsetHeight * 0.9 + 'px';
        popup.style.left = that.offsetWidth * 0.9 + 'px';
        popup.style.padding = '0.3em';
        document.getElementsByTagName('body')[0].appendChild(popup);
    };
    elems[i].onmouseout = function() {
        // finding the id of the popup (since it's predictably created)
        var id = this.getAttribute('data-title').replace(/(\W)/g, '');
        // finding the element with that id, and hiding it
        document.getElementById(id).style.display = 'none';
    }
}​

JS 小提琴演示。

于 2012-10-22T10:27:36.827 回答