HTML标题属性样式

Question

HTML标题属性样式

8

如何在不使用JavaScript或CSS的情况下更改以下标签中标题属性的样式，因为我将HTML插入到一个其他无法编辑的文档中的特定位置。

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

- user6556957

@Turnip说他不想使用CSS和JavaScript，所以这不是那个问题的重复。关于这一点，我认为没有任何这些是不可能做到的。 - meJustAndrew

1

OP在投票后添加了这个要求。是的，没有CSS就不可能样式化任何东西。 - Turnip

1

你怎么可能在没有 CSS 的情况下样式化任何东西？这个要求使得这个问题毫无意义。 - scrappedcola

@scrappedcola，可能OP是在询问非外部CSS的可能性，而不知道其中的区别吗？ - Adam Buchanan Smith

你想要为指定标题时显示的悬停框或 span 本身设置样式吗？如果是 span 本身，那么 Adam 的答案中的示例 3 是正确的方法。如果是由于 title 属性而出现的悬停框，则会变得复杂，因为没有真正的直接 CSS 可以与系统默认工具提示交互。您可以像此帖子中所述进行掩盖。 - scrappedcola

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BritishSam · Accepted Answer

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