当鼠标悬停在输入文本框上时显示一些文本

我有一个输入文本框，当用户的鼠标悬停时，我想在其中显示一些文本区域，给他提供输入文本的信息。这里是我的HTML代码：当鼠标悬停在输入文本框上时显示一些文本

<html> 
<body> 
<style type="text/css"> 
.mouseover 
{ 



} 

</style> 
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span> 
<input id="mybox" type="text" /> 

</body> 
</html>

什么是最好的CSS技巧，将有助于做到这一点？提前感谢您的帮助。

来源

2014-01-17 mounaim

CSS'：你试过hover'？ – micnic

是的micnic :)我试过@Midhum提供的答案，但它不能在IE8上工作：/ – mounaim

你可以用CSS做这一切。使用CSS三角形为工具提示玩耍，但你主要寻找的是使用:hover伪类。不需要Javascript。

.input { 
    position: relative; 
} 

.tooltip { 
    display: none; 
    padding: 10px; 
} 

.input:hover .tooltip { 
    background: blue; 
    border-radius: 3px; 
    bottom: -60px; 
    color: white; 
    display: inline; 
    height: 30px; 
    left: 0; 
    line-height: 30px; 
    position: absolute; 
} 

.input:hover .tooltip:before { 
    display: block; 
    content: ""; 
    position: absolute; 
    top: -5px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid blue; 
}

http://jsfiddle.net/v8xUL/1/

来源

2014-01-17 09:12:04 RichieAHB

谢谢@richieahb，这就是我一直在寻找:)但它不适用于IE8。 – mounaim

这是否解决您的问题？ http://stackoverflow.com/questions/5138481/ie-8-css-hover-over-input-element-issue – RichieAHB

您可以使用jQuery工具提示：

Jquery Tooltip

来源

2014-01-17 09:04:53

* simple css-based tooltip */ 
.tooltip { 
    background-color:#000; 
    border:1px solid #fff; 
    padding:10px 15px; 
    width:200px; 
    display:none; 
    color:#fff; 
    text-align:left; 
    font-size:12px; 

    /* outline radius for mozilla/firefox only */ 
    -moz-box-shadow:0 0 10px #000; 
    -webkit-box-shadow:0 0 10px #000; 
} 
// select all desired input fields and attach tooltips to them 
     $("#myform :input").tooltip({ 

     // place tooltip on the right edge 
     position: "center right", 

     // a little tweaking of the position 
     offset: [-2, 10], 

     // use the built-in fadeIn/fadeOut effect 
     effect: "fade", 

     // custom opacity setting 
     opacity: 0.7 

     });

了这个链接http://jquerytools.org/demos/tooltip/form.html

来源

2014-01-17 09:05:30

试试这个属性是ASP，但可能对你的情况

的ErrorMessage = “您的信息” 工作;

来源

2014-01-17 09:28:09 pakitoUser3205849

我应该在哪里放这个属性@ pakitoUser3205849？ – mounaim

尝试在您的输入应答器。这里下我的情况下这对于我的工作原理：\t的 \t \t \t \t \t \t \t \t \t \t \t \t \t的 – pakitoUser3205849

不，这不起作用:) – mounaim

只是另一种方式做到这一点...

Filldle Demo

对于我在IE8 OK DEMO

<input type="text"> 
<span>Some Text inside... </span> 




span { 
     background-color: rgba(0,102,255,.15); 
     border: 2px solid rgba(0,102,255,.5); 
     border-radius: 10px; 
     color: #000; 
     display: none; 
     padding: 10px; 
     position: relative; 
    } 

span:before { 
    content: ""; 
    border-style: solid; 
    border-width: 0 15px 15px 15px; 
    border-color: transparent transparent rgba(0,102,255,.5) transparent; 
    height: 0; 
    position: absolute; 
    top: -17px; 
    width: 0; 
} 

input { 
    display: block 
} 

input:hover + span { 
    display: inline-block; 
    margin: 10px 0 0 10px 
}

来源

2014-01-17 09:38:42 Sven

@ Sven。上面的例子给了我所有文本字段的工具提示。我们如何才能得到它仅用于特定的文本字段 –

使用类而不是html元素作为选择器。 – Sven

当鼠标悬停在输入文本框上时显示一些文本

回答

相关问题