应用样式到超链接标题

Question

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

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

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

- user00239123

---

请勿重复：https://dev59.com/dnI-5IYBdhLWcg3wHUdB - Ionică Bizău

我认为你需要更精确地提出问题，如果你想知道如何通过CSS编辑标题属性（链接的悬停文本），请使用@Johnツ的答案，否则你需要确定你是否想样式化所有具有标题“Hello”的内容，或者可以通过类来完成。 - Andrew Morris

Answer 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

- Ionică Bizău

---

这不是 OP 所要求的。你可以为 ':after' 添加样式，但这样会有两个标题，看起来比之前更糟糕。 - dfsq

+1 虽然这并不是为浏览器的标题弹出框设置样式，而是创建一个新的弹出框。这样做的问题在于现在你有了两个标题弹出框... - xec

@dfsq 我猜这是浏览器的默认设置。但这是最接近的解决方案... - Ionică Bizău

如果您使用'data-title="Hello"'而不是title，您甚至可以更接近。 content: attr(data-title); 这样标题就不会显示出来。 - dfsq

我认为这是一个好主意。只需将 title 属性更改为 tip，浏览器的标题弹出窗口就不会显示。请参见：http://jsfiddle.net/tDQWN/1/ - ijse

Answer 2

好的，你无法更改浏览器默认设置。但是你可以使用一个小型的jQuery插件来创建工具提示，并完全控制鼠标悬停时显示元素的外观样式。 点击此链接查看示例

- Zyad Sherif

---

使用CSS3是可能的：https://dev59.com/MnTYa4cB1Zd3GeqPqRTl#17466299 - Ionică Bizău

@Johnツ 不可能的。样式伪元素:after和更改默认标题样式是不同的。 - dfsq

确实如@dfsq所说，无法控制标题属性...最好的选择是使用作为工具提示的span。 - Zyad Sherif

Answer 3

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

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

- Petar Simic