如何在没有JavaScript的情况下仅使用内联CSS创建工具提示？

本文介绍了如何在没有JavaScript的情况下仅使用内联CSS创建工具提示？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图使用不带JavaScript的内联CSS创建悬停工具提示。 这是我现在的代码 < a href =＃ style ={position：relative; top：50px; left：50px;} ：hover span {opacity：1; visibility：visible;}> 悬停文本 style =top：-10px; background-color：black; color：white; border-radius：5px; opacity：0; position：absolute; - webkit-transition：all 0.5s; -moz-transition：all 0.5s; -ms-transition：all 0.5s; -o-transition：all 0.5s; transition：all 0.5s; visibility：hidden;> 工具提示文本< / span> < / a> 据此应该允许： http://www.w3.org/TR/2002/WD-css-style-attr-20020515 我知道这不是推荐的方式，但只有内联CSS才可以使用。 解决方案您非常接近，我添加了一些属性： < a href =＃class =tooltip> ;悬停文本< span> tooltip thisIsALongTextMadeToBeBreak< / span> < / a> CSS标记： a.tooltip { position：relative; top：50px; left：50px; } a.tooltip：hover span { opacity：1; 可见性：可见; } a.tooltip span { padding：10px; top：20px; min-width：75px; max-width：150px; background-color：＃000000; 颜色：#FFFFFF; height：auto; border-radius：5px; opacity：0; 位置：绝对; 可见性：隐藏; word-wrap：分词; -webkit-transition：全部为0.5s; -moz-transition：全部0.5s; -ms-transition：全部为0.5s; -o-transition：全部0.5s; 过渡：全部0.5秒; } 如果你想检查一下这里有一个现场演示 如果你愿意，你可以看看更多的例子/想法这里 希望它有帮助！ I'm trying to create a hover tooltip using inline CSS without JavaScript.This is the code I have now<a href="#"style="{position:relative; top:50px; left:50px;} :hover span {opacity:1; visibility:visible;}"> hover text <span style="top:-10px; background-color:black; color:white; border-radius:5px; opacity:0; position:absolute; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; visibility:hidden;"> tooltip text </span></a>According to this it should be allowed: http://www.w3.org/TR/2002/WD-css-style-attr-20020515I know this is not the recommended way to do it, but it needs to be usable where only inline CSS can be used. 解决方案 You were pretty close, I've added some properties:HTML Markup:<a href="#" class="tooltip">hover text <span>tooltip thisIsALongTextMadeToBeBreak</span></a>CSS Markup:a.tooltip { position: relative; top: 50px; left: 50px;}a.tooltip:hover span { opacity: 1; visibility: visible;}a.tooltip span { padding: 10px; top: 20px; min-width: 75px; max-width: 150px; background-color: #000000; color: #FFFFFF; height: auto; border-radius: 5px; opacity: 0; position:absolute; visibility: hidden; word-wrap: break-word; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}Here's a live demo if you want to check it outIf you want, you can check it out some more examples/ideas hereHope it helps! 这篇关于如何在没有JavaScript的情况下仅使用内联CSS创建工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！