参考了百度空间的做法,关键点是不使用display而是visibility来控制是否显示,这样就没有了事件源转移而导致的闪动问题。
<div class="cell">
<div class='c_opera' style="visibility:hidden;"><a href="#">删除</a></div>
<div class="c_title">个人图片</div>
<div style="position:static;" class='c_logo'><img class='imgStyle' src="http://misc.home.news.cn/blog/images/random_small.jpg" border=0/></div>
<div class="c_info"><br/> </div>
</div>
(function() {
function doOnload() {
var cell, opera, cellLists = $("mt").getElementsByTagName("div");
for(var i = cellLists.length - 1; i >= 0; i--) {
cell = cellLists[i];
if(cell && cell.className == "cell") {
opera = getElementsByClassName("c_opera",cell)[0];
opera.id = "c_opera" + i;
cell.name = i;
cell.onmouseover = cellMOver;
cell.onmouseout = cellMOut;
}
}
}
function cellMOver(event) {
$("c_opera" + this.name).style["visibility"] = "visible";
}
function cellMOut(event) {
$("c_opera" + this.name).style["visibility"] = "hidden";
}
//附加 onload事件
EventUtil.addEventHandler(window, "load", doOnload);
})();
分享到:
相关推荐
这意味着开发者可以根据需要创建多个隐藏层,并且它们可以与不同的元素关联,当鼠标移到这些元素上时,相应的隐藏层就会出现。这样的设计灵活性很高,适应各种网页布局和设计需求。 在实际应用中,开发者首先需要在...
当我们想要在用户将鼠标悬停在某个元素上时显示额外的信息,我们可以利用CSS来隐藏这个div,然后通过JavaScript事件监听器在鼠标悬停事件触发时显示它。 首先,我们需要创建一个div,并将其样式设置为默认隐藏。在...
特别是在制作交互式UI时,鼠标移入移出元素时触发的样式变化是一个非常常见的操作。本文将详细介绍如何在Vue项目中实现鼠标移入时添加一个class样式,而鼠标移出时则移除该样式(通常是添加或移除名为"active"的...
标题提到的"很好用的JS左侧导航菜单,滑过显示,移开隐藏"是一种常见的交互设计模式,它利用JavaScript(JS)来实现动态效果,增强用户的浏览体验。这种设计通常被称为“悬停显示”或“滑过菜单”,它在鼠标悬停时...
- 显示/隐藏提示信息:当鼠标悬停在某个元素上时,显示相关信息,离开时隐藏。 - 控件状态切换:例如,按钮在鼠标悬停时改变背景色或边框,提供视觉反馈。 - 动画效果:在鼠标进入和离开时触发元素的动画变化,增加...
本示例中,我们关注的是一个基于jQuery实现的图片特效,即“鼠标移到Image上方时显示文字效果”。这个功能是通过结合jQuery事件监听器和CSS样式来创建的,当用户将鼠标悬停在图片上时,会在图片底部显示相关信息,...
6. 动画效果:为了提高用户体验,可以添加一些动画效果,比如淡入淡出,当鼠标移入和移出时平滑地显示和隐藏日程详情。 最后,根据提供的压缩包文件"DateSchedule",我们可以假设其中包含了实现这个功能的HTML、CSS...
这种特效通常用于当用户将鼠标悬停在主菜单项上时,会展示出与之相关的子菜单项,以便用户能够更快速地访问他们感兴趣的内容。 在实现这个特效时,主要涉及到JavaScript的事件处理机制,包括`mouseover`和`mouseout...
在标题和描述中提到的“鼠标移进显示子菜单,移开隐藏子菜单”的特性,是这种菜单的一个典型交互模式,也称为悬停展开效果。这种设计能够有效地节省屏幕空间,同时保持用户界面的整洁,只有当用户需要时才会显示子...
本案例旨在创建一个响应式的卡片菜单系统,当用户鼠标移入卡片时,显示相应的子菜单内容;当鼠标移出时,则隐藏这些内容。这种效果常见于电子商务网站或拥有大量分类信息的站点上,能够帮助用户快速浏览和查找所需...
这个特效使得用户在浏览网页时,当鼠标悬停在图片上时,图片会自动放大并以提示框的形式显示出来,同时能够根据浏览器窗口的大小调整显示位置,提供更好的视觉体验。下面将详细解析这个特效的工作原理和实现方式。 ...
鼠标移动到文字上方显示悬浮菜单支持显示与隐藏,当鼠标移动到文字上方,弹出悬浮菜单,鼠标移出文字或移出悬浮菜单,菜单隐藏
3. **事件处理**:在JavaScript中,我们可以监听并响应各种用户事件,如`mouseover`(鼠标移入)和`mouseout`(鼠标移出)。通过添加事件监听器,我们可以在用户将鼠标悬停在元素上时触发提示框的显示和隐藏。 4. *...
通过以上方法,你可以创建出具有鼠标移过显示效果的GridView,提升用户在浏览数据时的体验。记住,良好的用户体验不仅在于视觉效果,还在于功能的易用性和响应性。因此,在设计这些效果时,应始终以用户为中心,确保...
本篇将详细讲解如何使用jQuery来实现在表单`input`中的提示文字随鼠标焦点移进移出而显示或隐藏的功能。 首先,我们需要在HTML中设置表单的基本结构。通常,每个`input`元素会有一个默认的`value`属性,这个属性的...
在Vue.js中,实现鼠标移入(mouseenter)和移出(mouseleave)事件是常见的交互功能,主要用于添加动态效果或提供额外的信息。以下是对标题和描述中提到的知识点的详细解释: 1. **Vue事件绑定**: 在Vue中,我们...
【jQuery鼠标移入方向感知显示文字特效】是一种常见的网页交互设计,主要应用于增强用户体验,尤其在展示图片信息时。这个特效使得用户在鼠标移动到图片上时,能够以优雅的方式看到与图片相关的文字描述,而不会突然...
当用户将鼠标指针移到元素上时,`:hover`状态会被激活,允许我们为该元素定义不同的样式,例如显示隐藏的文字。在CSS中,你可以这样设置: ```css .element:hover { display: block; } ``` 这里的`.element`是...
通过`on()`或`hover()`方法,我们可以轻松地在鼠标移入和移出时执行不同的操作,如改变元素样式、显示隐藏内容等。了解并熟练掌握这些事件处理技术,对于提升网页的交互性和用户友好性至关重要。
后者在鼠标移开时将其设为false,隐藏弹窗。 3. **样式(style)**: `.dpop`样式定义了一个绝对定位的弹窗,具有一定的边框和背景色,以确保它在鼠标悬停时正确显示。 4. **数据(data)**: `tableData`是一个...