- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
当我将鼠标放在输入类型的文本上时,我需要在小弹出窗口中显示一些信息。
目前我正在使用这样的标题应答器:http://jsfiddle.net/q8Lp0nLo/
<input type="text" size="5"><div>The text to show</div>
div{
display:inline-block;
visibility:hidden;
position:absolute;
background-color:#E5E5F0; color:black;
}
input[type="text"]:hover~ div{visibility:visible}
它在 chrome 上运行良好,但在 IE 上运行不佳。如果我完全填写输入,弹出窗口不会出现或出现并在几秒钟后隐藏。
制作这个的最佳方法是什么? : 完成
新问题:如何在鼠标位置旁边显示弹出窗口(我不需要在移动鼠标的同时移动弹出窗口,只需在第一个位置显示一次)。
实际代码:http://jsfiddle.net/q8Lp0nLo/
就像这个,但有弹出窗口:http://jsfiddle.net/BaDCe/
谢谢
最佳答案
试试这个:
/* tooltip */
.tool-tip{
color: #fff;
background-color: rgba( 0, 0, 0, .7);
text-shadow: none;
font-size: .8em;
visibility: hidden;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
text-align: center;
opacity: 0;
z-index: 999;
padding: 3px 8px;
position: absolute;
cursor: default;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
.tool-tip,
.tool-tip.top{
top: auto;
bottom: 114%;
left: 50%;
}
.tool-tip.top:after,
.tool-tip:after{
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
content: ' ';
height: 0px;
width: 0px;
border: 6px solid transparent;
border-top-color: rgba( 0, 0, 0, .7);
}
/* default heights, width and margin w/o Javscript */
.tool-tip,
.tool-tip.top{
width: 80px;
height: 22px;
margin-left: -43px;
}
/* tool tip position right */
.tool-tip.right{
top: 50%;
right: auto;
left: 106%;
margin-top: -15px;
margin-right: auto;
margin-left: auto;
}
.tool-tip.right:after{
left: -5px;
top: 50%;
margin-top: -6px;
bottom: auto;
border-top-color: transparent;
border-right-color: rgba( 0, 0, 0, .7);
}
/* tool tip position left */
.tool-tip.left{
top: 50%;
left: auto;
right: 105%;
margin-top: -15px;
margin-left: auto;
}
.tool-tip.left:after{
left: auto;
right: -12px;
top: 50%;
margin-top: -6px;
bottom: auto;
border-top-color: transparent;
border-left-color: rgba( 0, 0, 0, .7);
}
/* tool tip position bottom */
.tool-tip.bottom{
top: 115%;
bottom: auto;
left: 50%;
margin-bottom: auto;
}
.tool-tip.bottom:after{
position: absolute;
top: -12px;
left: 50%;
margin-left: -7px;
content: ' ';
height: 0px;
width: 0px;
border: 6px solid transparent;
border-top-color: transparent;
border-bottom-color: rgba( 0, 0, 0, .6);
}
/* tooltip on focus left and right */
.on-focus .tool-tip.left,
.on-focus .tool-tip.right{
margin-top: -19px;
}
/* on hover of element containing tooltip default*/
*:not(.on-focus):hover > .tool-tip,
.on-focus input:focus + .tool-tip{
visibility: visible;
opacity: 1;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
/* tool tip slide out */
*:not(.on-focus) > .tool-tip.slideIn,
.on-focus > .tool-tip{
display: block;
}
.on-focus > .tool-tip.slideIn{
z-index: -1;
}
.on-focus > input:focus + .tool-tip.slideIn{
z-index: 1;
}
/* bottom slideIn */
*:not(.on-focus) > .tool-tip.slideIn.bottom,
.on-focus > .tool-tip.slideIn.bottom{
top: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.bottom,
.on-focus > input:focus + .tool-tip.slideIn.bottom{
top: 115%;
}
.on-focus > input:focus + .tool-tip.slideIn.bottom{
top: 100%;
}
/* top slideIn */
*:not(.on-focus) > .tool-tip.slideIn,
*:not(.on-focus) > .tool-tip.slideIn.top,
.on-focus > .tool-tip.slideIn,
.on-focus > .tool-tip.slideIn.top{
bottom: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn,
*:not(.on-focus):hover > .tool-tip.slideIn.top,
.on-focus > input:focus + .tool-tip.slideIn,
.on-focus > input:focus + .tool-tip.slideIn.top{
bottom: 110%;
}
/* left slideIn */
*:not(.on-focus) > .tool-tip.slideIn.left,
.on-focus > .tool-tip.slideIn.left{
right: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.left,
.on-focus > input:focus + .tool-tip.slideIn.left{
right: 105%;
}
/* right slideIn */
*:not(.on-focus) > .tool-tip.slideIn.right,
.on-focus > .tool-tip.slideIn.right{
left: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn.right,
.on-focus > input:focus + .tool-tip.slideIn.right{
left: 105%;
}
<div style="width: 550px; margin: 0px auto;">
<div style="clear:both;padding:20px;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip right on focus" />
<div class="tool-tip slideIn right">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip left on focus" />
<div class="tool-tip slideIn left">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip Top on focus" />
<div class="tool-tip slideIn">Tool Tip</div>
</div>
<div style="clear:both;"></div>
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<input type="text" value="" name="try" placeholder="Tooltip Bottom on focus" />
<div class="tool-tip bottom slideIn ">Tool Tip</div>
</div>
</div>
关于html - 在输入类型文本上显示 "small popup"的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33009053/
希望你能帮助我。我阅读并再次阅读了 Magnific Popup 的文档,但我对 javascript 还不够好。 1- 我用这个链接打开一个弹出窗口: OPEN POPUP 和这个 javascri
我最近刚刚实现了“Magnific Popup”并且弹出窗口很好,但是当我单击一个输入框时,整个弹出窗口消失回到父页面。在插件网站上显示的示例中,整个对话框都是可单击的,直到您在该框外单击。 我希望它
我的弹出窗口正常工作,但有时用户会点击浏览器上的后退按钮关闭弹出窗口。 如何让浏览器后退按钮关闭已经打开的“magnific-popup”? 谢谢 最佳答案 经过一些挖掘发现 history.js 然
我制作了一个带有华丽弹出窗口的视频库。 但与图片库不同的是,视频库不显示计数器,例如1/3 在视频的右下角。为什么不?在图片库中,它运行良好。 视频库代码: $('.gallery_video').e
我正在使用 magnific popup 和 ajax 将内容加载到其中,并通过将查询字符串附加到 url 将值传递给 ajax 内容,除了在 IE7(可能还有 IE8)中工作正常。原因很可能是查询字
有没有办法绑定(bind)一个事件回调,以便为 Magnific Popup 的所有实例调用它?在我正在构建的网站上,当主浏览器滚动条消失时,几个元素具有固定位置和“跳转”。我想设置一个回调以在打开任
$.magnificPopup.open({ items: { src: $('#cabinet-msg') }, type:'inline', mid
在 jquery 对话框中我们可以做 $("#id").dialog('open|close') 打开关闭对话框。如何在 Magnific-popup 中做到这一点? 最佳答案 $.magnificP
我正在以这种方式制作新窗口: var WSHShell = WScript.CreateObject("WScript.Shell"); WSHShell.Popup("This is popup."
我打开一个带有 js 弹出窗口的 html 页面 Link to popup 现在我的弹出窗口中有一些链接,我想关闭我的链接的弹出窗口 onclick 并在旧窗口中打开链接。对于旧窗口,我指的是
无法在放大的弹出窗口中播放视频。 当我使用 class=iframe ,页面将重定向到 youtube 并播放视频。 但是当我使用 class=popup-youtube ,将显示弹出窗口,但我收到以
我有一个 Leaflet Popup 附加到一个标记,它给用户两个按钮来使用 jQuery 取消或移动到另一个页面。 这些按钮最初工作正常,除非您曾经准确地单击标记以使 Popup 消失,然后再次单击
我有 2 个 JQM 页面和 1 个它们共享的弹出窗口。我有一个事件处理程序绑定(bind)到两者的“pagecreate”,里面有这样的代码: $(document).on("pagecreate"
System.InvalidOperationException: You MUST call Rg.Plugins.Popup.Popup.Init(); prior to using it. 我已
测试 Magnific Popup 当前是否“打开”的最佳方法是什么? 检查某个 div 的存在是否会成为 future 的证明? 例如,如果我使用: if ($(".mfp-ready").leng
我的指令有问题。如果我从弹出 Controller 调用 $scope.popup.show = false 行,它就可以正常工作。如果我从子 contentDirective 调用 $scope.h
我在popup.js中有两个变量。我想把它们放在一起到一个 url ,无论如何就像 chrome.tabs.create({active: true, url: "https://"+savedApi
我有一些代码,它允许用户检查复选框并在提交时打开与新选项卡中的复选框关联的网址。如果两个复选框都被选中,则会打开两个选项卡。它的工作原理与预期一致,看起来像: document.getElementB
我有一个弹出窗口,其高度约为屏幕的 70%。我在这个弹出窗口中有 2 个 div, header-div 具有固定高度,例如20px 和一个 content-div,它应该使用剩余的可用高度。 目前我
我正在构建一个包含教程的 MMO。 当用户在教程中尝试离开教程或关闭选项卡/浏览器时,我需要显示一个自定义弹出窗口,其中包含有关用户退出教程的原因的选项。 我熟悉 onbeforeunload 事件,
我是一名优秀的程序员,十分优秀!