Question

如何在不使用javascript或CSS的情况下更改以下标记中title属性的样式，因为我将HTML插入到其他不可编辑的doc中的特定位置。

    <span title = "This is information"> This is a test
    </span>

Answer 1

https://jsfiddle.net/LvjaxLfn/

<span title = "This is information">This is a test</span>

span:hover {
    position: relative;
}

span[title]:hover:after {
     content: attr(title);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 20;
     background:red;
}

2017年12月14日更新

看来这显示了2个标题，另一个可能是：

https://jsfiddle.net/LvjaxLfn/153/

<span aria-label="This is information">This is a test</span>

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
     content: attr(aria-label);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 20;
     background:red;
}

使用aria标签保持可访问性

您还可以添加转换延迟，以便在像本机html标题

之类的延迟后显示

https://jsfiddle.net/f9zna6k2/10/

span {
  position: relative;
  cursor: pointer;
}

span[aria-label]:after {
  opacity:0;
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background:red;
  transition: opacity 0.5s;
  pointer-events:none;
}

span[aria-label]:hover:after {
  opacity:1;
  transition-delay:1.5s;
}

HTML标题属性样式

1 个答案: