html按钮上的提示信息,如何在禁用的HTML按钮上呈现工具提示

David Thomas..

14

一个理想的解决方案是跨浏览器兼容,而这个建议不是; 我只在Ubuntu 9.10上进行了测试,但是使用Chrome,Firefox,Epiphany和Opera,它们似乎在那些中可靠地运行,这意味着它们在Windows对应物中具有可靠性.IE显然是一个完全不同的鱼.

话虽如此:

这个想法基于以下(x)html:

disabled button

并使用以下CSS实现接近您的目标:

button {

position: relative;

}

button:hover:after {

position: absolute;

top: 0;

left: 75%;

width: 100%;

content: attr(title);

background-color: #ffa;

color: #000;

line-height: 1.4em;

border: 1px solid #000;

}

button {

position: relative;

box-sizing: border-box;

}

button:hover:after {

position: absolute;

top: 0;

left: 75%;

width: 100%;

content: attr(title);

background-color: #ffa;

color: #000;

line-height: 1.4em;

border: 1px solid #000;

box-shadow: 2px 2px 10px #999;

}

disabled button

这不是理想的,但它是我能想到的最好的非JavaScript想法.

你在茶壶里煮鱼吗？ (8认同)

哦,好吧,现在有道理.我认为他正在做一个讽刺性的评论,比较IE的编程和烹饪鱼在一个非传统的容器中. (5认同)