Question

我在html中写了一个像这样的缩写

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

这段代码只显示4或5秒的缩写。是不是可以定制这个时间??

Answer 1

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

您可以使用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 Fiddle demo

这确实需要用户拥有支持CSS生成内容的浏览器，因为如果有title属性，则CSS pop-up and the default title showing up同时具有非常有用或特别漂亮的JS Fiddle demo。< / p>

另一种方法是使用嵌套元素和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 Fiddle demo

一种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';
    }
}

在html中设置缩写标记的时间

1 个答案: