Question

我有以下HTML代码

<a href="www.example.com" title="example">Link</a>

我想要的是改变大小背景颜色和标题的其他属性。有可能吗？

Answer 1

锚点标题的样式由用户代理处理。如果您想自己设计工具提示，则必须实现它。

有关详细信息，请参阅here

Answer 2

这是不可能的。

但你可以使用别的东西，而不是“原生”的头衔。添加您自己的自定义属性并执行一些javascript / css以显示工具提示。

例如：

<a href="linkstowhatyouwant" data-mytitlecustom="click here" class="tooltipped">

使用jQuery / Javascript / CSS，可以检测鼠标何时位于 #tooltipped 元素上。并显示工具提示，您可以使用css 以您希望的方式设计。

或者也许只是在某处找到这样的插件，我确信它存在...例如https://jqueryui.com/tooltip/

Answer 3

我不认为你可以设置标题的样式，但是你可以通过在悬停时使用带有CSS :after伪元素的数据属性来模拟其功能：

＆＃13;

a {
  position: relative;
}

a:hover:after {
  content: attr(data-title);
  position: absolute;
  font: 10px verdana;
  top: -110%;
  left: 0;
  background: #ace;
  color: black;
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 20%;
  padding: 3px;
}

＆＃13;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a href="www.example.com" data-title="example">Link</a>

＆＃13;

Answer 4

锚点的title属性是浏览器默认的工具提示文本，无法使用任何属性设置样式。

为此，我们使用jquery和css进行了一些棘手的代码。

参考http://www.electrictoolbox.com/style-html-anchor-title-jquery-css/

如何设置html标题标签的大小

4 个答案: