Html 如何更改锚定标记中标题属性的样式?
例如:Html 如何更改锚定标记中标题属性的样式?,html,css,Html,Css,例如: <a href="example.com" title="My site"> Link </a> 如何更改浏览器中“标题”属性的显示方式?。默认情况下,它只有黄色背景和小字体。我想把它放大,改变背景色 是否有CSS方法设置标题属性的样式?CSS无法更改工具提示的外观。它依赖于浏览器/操作系统。如果您想要一些不同的东西,当您将鼠标悬停在元素上时,您必须使用Javascript来生成标记,而不是默认的工具提示。下面是一个如何执行此操作的示例: a.tip{ 边
<a href="example.com" title="My site"> Link </a>
如何更改浏览器中“标题”属性的显示方式?。默认情况下,它只有黄色背景和小字体。我想把它放大,改变背景色
是否有CSS方法设置标题属性的样式?CSS无法更改工具提示的外观。它依赖于浏览器/操作系统。如果您想要一些不同的东西,当您将鼠标悬停在元素上时,您必须使用Javascript来生成标记,而不是默认的工具提示。下面是一个如何执行此操作的示例:
a.tip{
边框底部:1px虚线;
文本装饰:无
}
a、 提示:悬停{
光标:帮助;
职位:相对
}
a、 叶尖跨度{
显示:无
}
a、 提示:悬停跨度{
边框:#C0C0 1px虚线;
填充:5px20px 5px 5px;
显示:块;
z指数:100;
背景:url(../images/status info.png)#f0不重复100%5%;
左:0px;
利润率:10px;
宽度:250px;
位置:绝对位置;
顶部:10px;
文本装饰:无
}
无法设置本机工具提示的样式
也就是说,您可以使用一些库,在元素悬停时显示浮动层的样式(而不是本机工具提示,并抑制它们),只需要很少或不需要修改代码…您无法设置默认浏览器工具提示的样式。但您可以使用javascript创建自己的自定义HTML工具提示
a[title="My site"] {
color: red;
}
这也适用于要添加的任何属性,例如:
HTML
请参阅:我想在这里发布我的20行JavaScript解决方案。它并不完美,但可能对某些人有用,具体取决于您从工具提示中需要什么 何时使用它
- 为所有定义了
属性的HTML元素自动设置工具提示样式(这包括将来动态添加到文档中的元素)TITLE
- 每个工具提示都不需要Javascript/HTML更改或破解(只需
属性,语义清晰)TITLE
- 非常轻(压缩和缩小后增加约300字节)
- 您只需要一个非常基本的可设置样式的工具提示
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
- 需要jQuery,因此如果不使用jQuery,请不要使用
- 不支持同时具有工具提示的嵌套元素
- 您需要同时在屏幕上显示多个工具提示
- 您需要工具提示在一段时间后消失
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
风格
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
现在可以使用以下CSS设置工具提示的样式:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}
自定义工具提示模式的JSFIDLE是 它基于CSS定位和PSEDOO类选择器 检查伪类的跨浏览器支持
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
开发商。
/*CSS*/
a、 工具提示{
位置:相对位置;
}
a、 工具提示范围{
显示:无;
}
a、 工具提示:悬停范围,a。工具提示:焦点范围{
显示:块;
位置:绝对位置;
顶部:1米;
左:1.5em;
填充:0.2em 0.6em;
边框:1px实心#996633;
背景色:#FFFF66;
颜色:#000;
}
事实上似乎有一个纯CSS解决方案,只需要CSSattr
表达式、生成的内容和属性选择器(这表明它早在IE8就可以工作):
a{
位置:相对位置;
显示:内联块;
边缘顶部:20px;
}
a[标题]:悬停::之后{
内容:attr(title);
位置:绝对位置;
前-100%;
左:0;
}
我在这里找到了答案:
我自己的代码是这样的,我已经更改了属性名,如果您维护属性的标题名,那么最终会有两个相同文本的弹出窗口,另一个更改是,我悬停时的文本显示在暴露文本的下面
.tags{
显示:内联;
位置:相对位置;
}
.tags:悬停:在{
背景:#333;
背景:rgba(0,0,0,8);
边界半径:5px;
底部:-34px;
颜色:#fff;
内容:attr(光泽);
左:20%;
填充:5px15px;
位置:绝对位置;
z指数:98;
宽度:350px;
}
.tags:悬停:在{
边框:实心;
边框颜色:#333透明;
边框宽度:0 6px 6px 6px;
底部:-4px;
内容:“;
左:50%;
位置:绝对位置;
z指数:99;
}
公开文本
您不能设置实际的标题
属性的样式
title
属性中文本的显示方式由浏览器定义,并因浏览器而异。网页不可能对浏览器基于title
属性显示的工具提示应用任何样式
但是,可以使用其他属性创建非常类似的内容
您可以使用CSS和自定义属性(例如,数据标题
)制作伪工具提示
为此,我将使用数据标题
属性。是一种在DOM元素/HTML中存储自定义数据的方法。有。重要的是,它们可以由CSS选择
假设您可以使用CSS选择具有数据标题
属性的元素,那么您可以使用CSS创建(或)包含属性值的元素
样式化工具提示示例
更大,背景颜色不同(根据问题要求):
[数据标题]:悬停:之后{
不透明度:1;
过渡:所有的0.1轻松0.5秒;
能见度:可见;
}
[数据标题]:之后{
内容:attr(数据标题);
背景色:#00FF00;
颜色:#111;
字体大小:150%;
位置:绝对位置;
填充物:1px 5px 2px 5px;
底部:-1.6em;
左:100%;
空白:nowrap;
盒影:1px 1px 3px#22222;
不透明度:0;
边框:1px实心#111111;
z指数:99999;
可见性:隐藏;
}
[资料标题]{
位置:相对位置;
}
带有样式化工具提示(更大,背景颜色不同,
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}