`
aideehorn
  • 浏览: 261482 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV的鼠标滑过显示层

阅读更多

<style>
ul
{
margin:0;
padding:0;
list-style-type:none;
vheight:24px;
}
ul li
{
float:left;
display:inline;
}
ul a
{
text-decoration: none;
border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
display: block;
padding: 5px 0 3px;
margin-left:-1px;
width:258px;
font-weight: bold;
text-align:center;
line-height:15px;
color: #11449E;
}

a.on,a:hover
{
padding-top: 6px;
padding-bottom:3px;
width:259px;
border: 1px solid #ccc;
border-bottom: 0;
background:#DEEBFF;
}
</style>
<script>function findA(obj)
{
TagA=obj.getElementsByTagName("a");
if (TagA.length>0)
return TagA[0];
}

function findContentDIV(obj)
{
TagDiv=obj.childNodes;
var arrDiv = new Array;
for(i=0;i<TagDiv.length;i++)
{
var objDiv = TagDiv[i];
var re = /div/i;
var arr = re.exec(objDiv.tagName);
if(arr != null)
{
if(arr.index == 0)
{
arrDiv.push(objDiv);
}
}
}
return arrDiv;
}

function chShift(o,divGroupID)
{
o.style.cursor="pointer";
var t=o.parentNode;
var tA=t.getElementsByTagName("a");
var tGroup=document.getElementById(divGroupID);
var tGroupDIV=findContentDIV(tGroup);

for(i=0;i<tA.length;i++)
{
tA[i].className= null;
tGroupDIV[i].style.display="none";
if(tA[i]==findA(o))
{
tA[i].className="on";
tGroupDIV[i].style.display="block";
}
}
}</script>
<div>
<ul>
<li onmouseover="javascript:chShift(this,'divGroup')"><a class="on">Tab标题一</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题二</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题三</a></li>
</ul>
</div>

<div id="divGroup">

<div>Tab标题一对应的内容</div>
<div style="display:none">Tab标题二对应的内容</div>
<div style="display:none">Tab标题三对应的内容</div>

</div>

分享到:
评论

相关推荐

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能,并确保...

    jQuery炫酷鼠标滑过图片显示遮罩层特效.zip

    在本特效中,jQuery将负责监听鼠标滑过图片的事件,并触发相应的遮罩层显示。 要实现这个效果,我们首先要创建一个HTML结构,包含图片元素和遮罩层元素。图片元素通常是`&lt;img&gt;`标签,而遮罩层可以是`&lt;div&gt;`元素,...

    鼠标经过显示隐藏div

    ### 鼠标经过显示隐藏div - JavaScript与CSS结合实现 在Web开发中,通过JavaScript(简称JS)和CSS结合可以实现很多动态效果,其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术...

    Jquery+div/css 鼠标经过内容切换实例

    本实例重点讲解如何利用 jQuery 和 CSS 技术实现在鼠标经过(hover)某个div元素时,动态切换显示的内容。下面我们将深入探讨这个主题。 首先,我们来理解 `div` 和 `CSS` 的基本概念。`div` 是HTML中的一个通用...

    js鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容

    在JavaScript(JS)编程中,实现“鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容”的功能是一项常见的交互设计。这个功能可以提升用户体验,让用户在不离开当前页面的情况下查看图片的相关信息。下面我们将...

    鼠标滑过图片出现大图片提示层效果js代码

    当鼠标滑过缩略图时,大图的覆盖层(`.overlay`)显示出来;当鼠标离开时,覆盖层隐藏。 为了显示大图,我们需要在`mouseover`事件触发时设置覆盖层中的大图源(`src`属性)。这可以通过在HTML中添加一个`data-big-...

    DivCss鼠标划过滑动门效果

    "DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...

    jQuery实现鼠标滑过Div层背景变颜色的方法

    标题提到的“jQuery实现鼠标滑过Div层背景变颜色的方法”,即是这种交互技术的一种应用场景。 首先,我们来解析一下jQuery中的`hover`方法。`hover`方法是jQuery中用来模拟鼠标悬停事件的一个方法。当鼠标指针进入...

    鼠标经过显示层效果

    在网页设计中,"鼠标经过显示层效果"是一种常见的交互设计技术,用于增强用户体验。当用户将鼠标指针悬停在某个元素上时,会触发一个隐藏层的显示,这通常用于显示额外的信息、提示或者功能。这个效果的实现主要依赖...

    jquery鼠标滑过一次层替代另一个层

    在本例中,层可能是列表内容的容器,当鼠标滑过时,它们会相互替换显示。 jQuery 提供了丰富的事件处理函数,其中 `mouseover` 和 `mouseout` 事件用于监听鼠标进入和离开元素的操作。在“鼠标滑过”场景中,我们...

    鼠标滑过显示详情

    这段CSS代码使得当鼠标滑过图片时,图片会放大10%,并创建一个半透明的黑色背景层,同时显示隐藏的详细信息。`transition`属性为这些变化添加了平滑的过渡效果。 最后,如果需要更复杂的交互,例如动态加载文字或...

    JQuery 鼠标滑过图片显示隐藏标题

    "JQuery 鼠标滑过图片显示隐藏标题"这一技术正是为了实现这种交互效果而设计的。它允许用户在鼠标移动到图片上时,自动显示图片相关的文字描述,提供额外的信息,而当鼠标移开时,这些文字又会自动隐藏,保持页面的...

    js实现鼠标滑动到某个div禁止滚动

    关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能,这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如,在一个产品...

    鼠标经过放大显示圆形按钮

    在网页设计和交互开发中,"鼠标经过放大显示圆形按钮"是一种常见的增强用户体验的技巧。这个功能通常是通过JavaScript、CSS3以及HTML5实现的,它可以让用户更容易注意到按钮,增加互动性和视觉吸引力。下面我们将...

    鼠标滑过显示人物头像

    在网页设计中,实现“鼠标滑过显示人物头像”的功能是提高用户体验和交互性的一种常见技巧。这个功能通常应用于人物列表或者角色介绍等场景,用户只需要将鼠标悬停在人物名称上,就能看到对应的人物头像,无需点击...

    鼠标滑过图片显示详情

    在网页设计中,"鼠标滑过图片显示详情"是一种常见的交互式用户体验设计,它通过动态效果增强了用户与网站内容的互动性。这种效果通常应用于产品展示、相册浏览或者信息预览等场景,使得用户无需点击就能快速了解图片...

    又一个鼠标滑过小图显示大图的CSS特效

    本文将深入探讨如何利用CSS实现“鼠标滑过小图显示大图”的特效,这是一种常见的交互设计,常用于图片展示、产品目录等场景,能够提升用户体验,使网站更加生动活泼。 首先,我们需要理解这个特效的基本原理:当...

    当鼠标经过显示隐藏层asp环境源码

    根据给定文件的信息,本文将围绕“当鼠标经过显示隐藏层ASP环境源码”这一主题进行深入探讨。本文将从CSS样式、JavaScript脚本以及HTML结构三个方面详细解析该功能的实现方式。 ### 一、CSS样式设计 在提供的代码...

    鼠标经过显示图片离开隐藏JS代码

    "鼠标经过显示图片离开隐藏JS代码"是一种常见的JavaScript技术,用于在用户将鼠标悬停在某个元素上时显示图片,而当鼠标离开该元素时,图片会自动隐藏。这种效果在网页导航、产品展示等方面应用广泛,可以提升用户...

Global site tag (gtag.js) - Google Analytics