将样式应用于超链接标题[重复]答案

【问题标题】：Applying style to a hyperlink title [duplicate]将样式应用于超链接标题[重复]
【发布时间】：2013-07-02 05:10:54
【问题描述】：

我需要一些帮助。例如，如果我有这样的超链接，我该如何管理超链接的标题

<a href="#" title="Hello">Press here</a>

如何更改“Hello”一词的字体和大小？

【问题讨论】：

复制：stackoverflow.com/q/2011142/1420197
我认为您的问题需要更精确，如果您正在寻找如何编辑标题属性，即链接的悬停文本，就CSS而言，请使用@ Johnツ回答，否则您需要确定是否要设置标题为“Hello”或可以通过类完成的所有内容

标签： html css

【解决方案1】：

您可以使用a[data-title]:hover 来设置样式（而不是title）。

例子：

HTML

<a href="#" data-title="Nice CSS title">Test</a>

CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

JSFIDDLE

【讨论】：

这不是 OP 要求的。你可以设置 ':after' 的样式，但是你会有两个标题，看起来比以前更糟了。
+1 虽然这并不是真正的浏览器标题弹出窗口的样式，而是创建一个新的。这个问题是你现在有两个标题弹出窗口......
@dfsq 我猜这是浏览器的默认设置。但这是最接近的解决方案...
如果你使用 'data-title="Hello"' 而不是标题，你可以更接近。 content: attr(data-title); 这样标题就不会出现了。
@dfsq 是的！谢谢你的建议。更新了我的答案。

【解决方案2】：

好吧，你不能把它作为浏览器的默认设置......但是你可以做的是使用一个小的 jQuery 插件作为工具提示，你可以完全控制悬停时出现的元素的外观。 Check this link for example

【讨论】：

使用 CSS3 是可能的：stackoverflow.com/a/17466299/1420197
@Johnツ不，这是不可能的。样式化伪元素:after 和改变默认标题样式不一样。
完全是@dfsq ，无法控制标题属性...最好的选择是使用充当工具提示的跨度。

【解决方案3】：

你不能改变标签内 Title 属性的样式。我的意思是你可以，但有一些浏览器不兼容。我认为最好的解决方案是为该标签创建一个特定的类，并在该标签内放置一个跨度。像这样的：

<a href="#" class="pop">Press here <span>Hello</span></a>

a.pop {
color: blue;
text-decoration: none;
position: relative
}

a.pop:hover {
text-decoration: underline;
}

a.pop span {
display:none;
}

a.pop:hover span {
display: block;
position: absolute;
left:0;
z-index:100;
background: grey;
padding: 5px 10px;
font-size:13px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
}

【讨论】：