`
koudailidexiaolong
  • 浏览: 96188 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript鼠标悬停改变背景颜色显示隐藏下级菜单

 
阅读更多


<div id="header" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a href="register.html">注册</a><a href="guestbook.html">留言</a></div>
<div class="navbar" >
<ul class="clearfix" id="clearfix">
<li onmouseover="onmouseOver(this,'child0')" class="current"><a href="#">首页</a></li>
<li onmouseover="onmouseOver(this,'child1')"><a href="#">图书</a></li>
<li onmouseover="onmouseOver(this,'child2')"><a href="#">百货</a></li>
<li onmouseover="onmouseOver(this,'child3')"><a href="#">品牌</a></li>
<li onmouseover="onmouseOver(this,'child4')"><a href="#">促销</a></li>
</ul>

</div>
</div>

实现的效果是当用户鼠标悬停在主菜单上的时候显示的是所有的信息当用户鼠标悬停在百货的时候显示百货的信息不显示其他的信息实现

实现动态的显示

javascript鼠标悬停改变背景颜色显示隐藏下级菜单 - 口袋里的小龙 - 口袋里的小龙

javascript鼠标悬停改变背景颜色显示隐藏下级菜单 - 口袋里的小龙 - 口袋里的小龙


<script type="text/javascript">
/*鼠标悬停的时候的样式*/
function onmouseOver(Obj,ulId){
/*获得当前ul节点下的子节点的数量*/
var length = document.getElementById("clearfix").getElementsByTagName("li").length;
var ulLength = document.getElementById("wrap").getElementsByTagName("ul").length;
//alert(ulLength);
for(i = 0;i<ulLength;i++){
document.getElementById("wrap").getElementsByTagName("ul")[i].style.display="none";
}
/*使用循环改变当前样式*/
for(i = 0;i<length;i++){
document.getElementById("clearfix").getElementsByTagName("li")[i].className="";
}
/*设置当前对象的样式*/
Obj.className="current";
document.getElementById(ulId).style.display="block";
}
</script>

<div id="childNav">
<div class="wrap" id="wrap">
<ul class="clearfix" id="child0">
<li class="first"><a href="#">音乐</a></li>
<li><a href="#">影视</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">运动鞋</a></li>
<li><a href="#">美容护肤</a></li>
<li><a href="#">家纺用品</a></li>
<li><a href="#">婴幼奶粉</a></li>
<li><a href="#">饰品</a></li>
<li class="last"><a href="#">Investor Relations</a></li>
</ul>
<ul class="clearfix" id="child1">
<li class="first"><a href="#">音乐</a></li>
<li><a href="#">影视</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">小说</a></li>
<li><a href="#">外语</a></li>
<li><a href="#">数码相机</a></li>
<li class="last"><a href="#">Investor Relations</a></li>
</ul>
</div>
</div>
<div id="main" class="wrap">
<div class="lefter">
<div class="box">
<h2>商品分类</h2>
<dl>
<dt>图书音像</dt>
<dd><a href="product-list.html">图书</a></dd>
<dd><a href="product-list.html">音乐</a></dd>
<dt>百货</dt>
<dd><a href="product-list.html">运动健康</a></dd>
<dd><a href="product-list.html">服装</a></dd>
<dd><a href="product-list.html">家居</a></dd>
<dd><a href="product-list.html">美妆</a></dd>
<dd><a href="product-list.html">母婴</a></dd>
<dd><a href="product-list.html">食品</a></dd>
<dd><a href="product-list.html">手机数码</a></dd>
<dd><a href="product-list.html">家具首饰</a></dd>
<dd><a href="product-list.html">手表饰品</a></dd>
<dd><a href="product-list.html">鞋包</a></dd>
<dd><a href="product-list.html">家电</a></dd>
<dd><a href="product-list.html">电脑办公</a></dd>
<dd><a href="product-list.html">玩具文具</a></dd>
<dd><a href="product-list.html">汽车用品</a></dd>
</dl>
</div>
<div class="spacer"></div>
<div class="last-view">
<h2>最近浏览</h2>
<dl class="clearfix">
<dt><img src="images/product/0_tiny.gif" /></dt>
<dd><a href="product-view.html">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dt><img src="images/product/0_tiny.gif" /></dt>
<dd><a href="product-view.html">法国德菲丝松露精品巧克力500g/盒</a></dd>
</dl>
</div>
</div>
<div class="main">
<div class="price-off">
<h2>今日特价</h2>
<ul class="product clearfix">
<li>
<dl>
<dt><a href="product-view.html" target="_blank"><img src="images/product/1.jpg" /></a></dt>
<dd class="title"><a href="product-view.html" target="_blank">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dd class="price">¥108.0</dd>
</dl>
</li>

</ul>
</div>
<div class="side">
<div class="news-list">
<h4>最新公告</h4>
<ul>
<li><a href="news-view.html" target="_blank">抢钱啦</a></li>
</ul>
</div>
<div class="spacer"></div>
<div class="news-list">
<h4>新闻动态</h4>
<ul>
<li><a href="news-view.html" target="_blank">抢钱啦</a></li>
</ul>
</div>
</div>
<div class="spacer clear"></div>
<div class="hot">
<h2>热卖推荐</h2>
<ul class="product clearfix">
<li>
<dl>
<dt><a href="product-view.html" target="_blank"><img src="images/product/1.jpg" /></a></dt>
<dd class="title"><a href="product-view.html" target="_blank">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dd class="price">¥108.0</dd>
</dl>
</li>

</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>

<wbr></wbr>
分享到:
评论

相关推荐

    js仿京东鼠标经过弹出下级菜单

    - 在JavaScript中,当鼠标悬停事件触发时,修改下级菜单的`display`属性为`block`,使其显示出来。反之,鼠标离开时恢复为`none`。 4. **JavaScript逻辑处理**: - 在处理函数中,你可以使用条件判断来确保只在...

    jquery鼠标经过显示下级菜单导航

    3. **CSS操作**: jQuery可以用来修改元素的CSS属性,例如显示/隐藏下级菜单。`.show()`和`.hide()`方法用于切换元素的可见性,`.css()`方法可以设置或获取元素的样式属性,如`display`。 4. **动画效果**: jQuery的...

    仿京东鼠标经过弹出下级菜单

    在IT行业中,构建交互式用户...通过以上技术的综合运用,我们可以实现类似京东的鼠标悬停弹出下级菜单的效果,为用户提供直观且高效的导航体验。在实际项目中,还应结合具体的业务需求和技术栈进行适当的调整和优化。

    JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码

    这可能包括颜色、字体、边框、背景色、以及在鼠标悬停时的改变。对于箭头,可以使用伪元素(如`:before`或`:after`)并结合CSS的`content`属性和`transform`属性来实现。 3. JavaScript事件监听:使用`...

    jquery鼠标经过显示内容特效菜单.rar

    在本例中,jQuery被用来监听用户鼠标的移动事件,当鼠标悬停在菜单项上时,触发下拉菜单的显示。这种交互方式可以有效地节省屏幕空间,同时提高用户的操作效率。 HTML源码是构建网页的基础,而“网站菜单”标签表明...

    DIV+CSS+JS鼠标经过显示横向下级菜单

    我们可以设置菜单项的背景色、字体、边框等样式,并利用`position`(位置)、`display`(显示模式)和`hover`(悬停)伪类来实现鼠标悬停时下级菜单的显示和隐藏。例如,下级菜单可以默认设置为`display:none`,当...

    jQuery鼠标经过滑动展开菜单代码

    这个特效允许用户只需将鼠标悬停在菜单项上,就能平滑地展开下级菜单,使得网站的导航更加直观和便捷。以下是对这个技术的详细解释: 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件...

    jQuery可智能判断下级菜单特效.zip

    在前端开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于实现各种交互效果,如本案例中的“jQuery可智能判断下级菜单特效”。这个压缩包文件包含了一个使用jQuery实现的下拉菜单特效,主要涉及到的技术点包括...

    竖向鼠标经过显示下级内容多级导航菜单

    2. **视觉反馈**:当鼠标悬停在某个菜单项上时,通常会有颜色变化、边框高亮或其他视觉效果来提示用户,这个菜单项有下级内容。 3. **动画效果**:为了使用户界面更加流畅,下级菜单的展开和收起通常会伴随平滑的...

    jquery鼠标经过显示弹性下级菜单导航

    在这个案例中,jQuery用于监听鼠标悬停事件,并控制下级菜单的显示和隐藏,实现了平滑的过渡效果。 接下来,我们探讨CSS在创建弹性布局中的作用。弹性布局,也称为Flexbox,是一种现代的布局模式,可以处理不同屏幕...

    向上三级导航菜单

    还需注意,通过hover伪类来定义鼠标悬停时的样式,以确保菜单项在鼠标悬停时能正确显示下级菜单。 三、JavaScript交互 虽然CSS可以实现简单的菜单展开和收起,但要实现更复杂的交互,如动画效果、延迟显示等,就...

    多级 菜单 多级 菜单

    /* 鼠标悬停时显示子菜单 */ } ``` 3. 可选:为了增强用户体验,可以添加过渡效果,如淡入淡出,使得菜单项的展开和收起更平滑。这可以通过CSS的`transition`属性实现。 4. 响应式设计:考虑到移动设备的多样性...

    js下拉菜单

    1. `menu_sub_icon.gif`:这可能是用于表示下拉箭头或者子菜单指示器的图像资源,增加视觉提示,让用户知道某个菜单有下级菜单。 2. `menu_bg.gif`:背景图像,可能用于美化菜单项的背景,增加视觉吸引力。 3. `...

    jquery鼠标经过显示下级菜单横向导航JS代码

    本主题聚焦于使用jQuery实现鼠标经过时显示下级菜单的横向导航效果,这是一种常见且实用的交互设计。jQuery是一种轻量级的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发动态网页变得更加便捷。 ...

    Javascript-三级下拉菜单的级联显示实例

    JavaScript三级下拉菜单的实现基于DOM(Document Object Model)操作,通过监听事件(如鼠标悬停或点击)来控制下拉菜单的显示和隐藏。通常,我们会有三个层次的`&lt;select&gt;`元素,每个层级的`&lt;option&gt;`元素会关联到下...

    JavaScript动态树型菜单

    2. CSS样式:通过CSS定义节点的样式,包括展开/折叠的图标、鼠标悬停效果等。 3. JavaScript操作:利用JavaScript来处理节点的展开和折叠,以及动态加载数据。 三、JavaScript实现 1. DOM操作:通过`document....

    3种精美下拉菜单

    当用户选择某一选项时,下级菜单会自动显示相关联的子选项。这需要JavaScript来跟踪选中状态和构建动态菜单结构。同时,通过CSS可以设置不同的层次深度的菜单项,如改变缩进、添加虚线分隔符等,以增强可读性。 第...

    jQuery三级下拉列表导航菜单.zip

    - **事件监听**:使用jQuery的`hover()`方法监听鼠标进入(`mouseenter`)和离开(`mouseleave`)事件,分别触发显示和隐藏下级菜单的操作。 - **DOM操作**:通过`children()`或`find()`方法找到当前菜单项的子...

    DIV伸缩菜单DIV伸缩菜单

    当用户鼠标悬停在某个菜单项上时,可以通过修改对应的CSS类来改变子菜单的`display`值,使其从隐藏变为显示。例如,可以设定`display:none`使子菜单默认不可见,然后在:hover状态下将其改为`display:block`。同时,...

Global site tag (gtag.js) - Google Analytics