个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试实现这种“圆/层”效果 ( https://www.thinglink.com/ )
我的 jQuery 技能很糟糕 :( 到目前为止，这就是我所做的...
HTML
<body style="margin:0; padding:0;">
<div class="container">
<div class="bubble-container bubble-a">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="bubble-container bubble-b">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="bubble-container bubble-c">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
CSS
.container { background-color:black; width:100%; height:400px; }
.layer { background-color:#FFFFFF; display:none; position:absolute; top:-70px; right:20px; width:200px; height:200px; z-index:99999999; overflow:hidden; }
.gps_ring {
border: 2px solid #ffffff;
padding:6px;
-webkit-border-radius: 30px;
height: 30px;
width: 30px;
display:block;
-webkit-animation: 0.6s pulsate infinite alternate ease-in-out;
-moz-animation: 0.6s pulsate infinite alternate ease-in-out;
-ms-animation: 0.6s pulsate infinite alternate ease-in-out;
-o-animation: 0.6s pulsate infinite alternate ease-in-out;
animation: 0.6s pulsate infinite alternate ease-in-out;
opacity: 0.0;
}
.gps_ring div.dot { background-color:transparent; width:100%; height:100%; -webkit-border-radius:30px; outline:none; text-indent:-9999px; }
.gps_ring:hover div.dot { background-color:#ef4036; }
.bubble-container { position: absolute; }
.bubble-a {
left:150px;
top:100px;
}
.bubble-b {
left:250px;
top:260px;
}
.bubble-c {
left:350px;
top:180px;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.3, 1.3); opacity: 1.0;}
}
jQuery
$(".bubble-container .gps_ring").hover(function(){
$(this).next().show();
$(this).next().focus();
});
$(".layer").mouseleave(function(){
$(this).hide();
});
有时鼠标移开时白色层不会隐藏，你知道为什么吗？
此外，我也想将红点设置为在我位于白色层上时可见。
谢谢!!
最佳答案
$(".bubble-container").hover(function(){
$(this).find('.gps_ring').next('.layer').show();
},function(){
$(this).find('.gps_ring').next('.layer').hide();
});
或者你可以只使用 .find()
$(".bubble-container").hover(function(){
$(this).find('.layer').show();
},function(){
$(this).find('.layer').hide();
});
关于jquery - 尝试做 onmouseover/onmouseout 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30257260/
25
4
0
我有这个脚本: $(document).ready(function(){ $('.infoLink').hover(function(){ $('.s
我有一个图像，当用户将鼠标悬停在图像上时，该图像会更改为新图像。单击新图像后，就会播放音频文件。当用户鼠标移出图像时，图像将恢复为默认图像。问题是音频仍在播放。我不太擅长js，当用户鼠标移出时如何让音
在尝试根据以下教程实现下拉菜单时，我遇到了一个奇怪的问题:http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php当我的
所以我有一个带有 3 个圆圈的导航和一个 jquery slider 。 默认情况下，第一个圆圈点亮，当用户点击第二个圆圈时， slider 移动到第二个 div，然后那个圆圈点亮，第一个圆圈变暗。这
如何在 onmouseout 时关闭组合框？ Volvo Saab Mercedes Audi 最佳答案 你不能(可靠地)做到这一点。出现的弹出窗口无法以编程方式进行操作，即打开或关闭，其
因此，当您将鼠标悬停在 article 元素上时，这段代码会播放一段音频。问题是当鼠标悬停在子元素上时它会停止。当鼠标悬停在一般 article 元素上并悬停在子元素上时，如何使 Stopsound
我正在尝试显示/隐藏按钮中的一些 文本。按钮是 S.O.S javascript代码是 function show() { sos_left=docu
所以这是一个非常简单的问题，但研究它，我只能找到更复杂情况的答案。这是我的: 我在母版页上有一张图片，当您将鼠标悬停在它上面时，它下方会显示一个面板(主要使用 css)并且该面板中有链接。因为母版页相
我目前正在将我网站的菜单从纯 JavaScript 切换到 jQuery。我的菜单有滚动效果。 菜单有一个外包装，其中设置了一个 onmouseout 事件。如果触发，则检查 relatedTarge
我正试图将鼠标悬停在上面以调出一个菜单。我的 javascript 工作得有点正确。当我将鼠标悬停在链接或菜单上时，菜单保持显示状态。但是，当我鼠标移出时，我遇到了问题。我的菜单 div 按原样消失了
在 Javascript 中，我希望 onmouseout 事件在生效之前休眠/暂停/等待/(不确定这里的术语是否正确)三秒钟。这是如何实现的？ 谢谢 最佳答案 function outfunctio
我有一个悬停元素，当用户将鼠标悬停在它上面时，将从隐藏元素中获取文本，当它悬停时，它将重新分配其先前的值。 我的 html 有点像这样。 Hover Here Lorem ipsum dolor
基本上我将翻转从我的 css 转换为 javascript。我还选择了其中一张页面加载后要选择的图片。但是我在处理 onMouseOut 事件时遇到了麻烦。除了那张照片，一切都很完美。当我将鼠标悬停在
我有一个 iframe #viewer 和一个出现在其上方的绝对定位元素 #appear_above_viewer。我希望 #appear_above_viewer 在鼠标经过 #viewer 时淡入
我有这个 html: 这个 javascript 函数: function pinkImg(x) { x.innerHTML = ''; } function
在我们所有的页面上，顶部都会显示一条重要消息。页面加载时，该消息看起来像浅灰色背景下的纯红色文本(与页面的其余部分相同)。如果用户想要更新它，他们可以单击它并调用 editMsg 函数，这使得它看起来
我有一个要求，我必须根据 mouseover 和 mouseout 事件显示替代元素。 默认元素是一个超链接(它会一直显示，除了在鼠标悬停时)，备用元素是一个下拉列表元素(它应该在超链接的鼠标悬停时显
我试图弄清楚如何清除 JavaScript onmouseleave 事件上特定 HTML ID 的内容。我的 onmouseover 工作得很好，但 onmouseout 却不行。 这是一个导航栏(
这是它不起作用的部分: function showDetailedView(element) { var img = document.getElementById(element); img
我一直在尝试做的是我有一个框，其中显然包含文本，我希望每当它悬停时，删除当前内容并添加另一个内容，当它悬停时，取回旧的。正如您所意识到的那样，我的尝试进行得并不顺利，我想知道什么是 exacy 问题。
我是一名优秀的程序员,十分优秀！