鼠标悬浮背景变色导航菜单

最新推荐文章于 2022-02-11 19:29:14 发布
最新推荐文章于 2022-02-11 19:29:14 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 前端js

分享一段代码实例，它实现了鼠标悬浮导航菜单背景变色效果。

代码实例如下:

     
     

      
      

       
       

        
        
 
            

              01 
            
 
            

              02 
            
 
            

              03 
            
 
            

              04 
            
 
            

              05 
            
 
            

              06 
            
 
            

              07 
            
 
            

              08 
            
 
            

              09 
            
 
            

              10 
            
 
            

              11 
            
 
            

              12 
            
 
            

              13 
            
 
            

              14 
            
 
            

              15 
            
 
            

              16 
            
 
            

              17 
            
 
            

              18 
            
 
            

              19 
            
 
            

              20 
            
 
            

              21 
            
 
            

              22 
            
 
            

              23 
            
 
            

              24 
            
 
            

              25 
            
 
            

              26 
            
 
            

              27 
            
 
            

              28 
            
 
            

              29 
            
 
            

              30 
            
 
            

              31 
            
 
            

              32 
            
 
            

              33 
            
 
            

              34 
            
 
            

              35 
            
 
            

              36 
            
 
            

              37 
            
 
            

              38 
            
 
            

              39 
            
 
            

              40 
            
 
            

              41 
            
 
            

              42 
            
 
            

              43 
            
 
            

              44 
            
 
            

              45 
            
 
            

              46 
            
 
            

              47 
            
 
            

              48 
            
 
            
 
             
 
              <!doctype html> 
             
 
             
 
              < 
              html 
              > 
             
 
             
 
              < 
              head 
              > 
             
 
             
 
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
             
 
             
 
              < 
              title 
              > 
              鼠标悬浮背景变色导航菜单 
              </ 
              title 
              > 
             
 
             
 
              < 
              style  
              type 
              = 
              "text/css" 
              > 
             
 
             
 
              *{  
             
 
             
 
                 
              margin: 0; 
             
 
             
 
                 
              padding: 0; 
             
 
             
 
                 
              text-decoration: none;  
             
 
             
 
                 
              list-style: none;  
             
 
             
 
                 
              color: #666; 
             
 
             
 
              } 
             
 
             
 
              .nav li{  
             
 
             
 
                 
              float: left;  
             
 
             
 
                 
              padding: 10px 20px;  
             
 
             
 
              } 
             
 
             
 
              .nav li.on{  
             
 
             
 
                 
              background: #10AEFF; 
             
 
             
 
              } 
             
 
             
 
              .nav li.on a{  
             
 
             
 
                 
              color: #fff; 
             
 
             
 
              } 
             
 
             
 
              </ 
              style 
              > 
             
 
             
 
              < 
              script  
              src 
              = 
              "http://libs.baidu.com/jquery/1.9.0/jquery.js" 
              ></ 
              script 
              > 
             
 
             
 
              < 
              script 
              > 
             
 
             
 
              $(document).ready(function () { 
             
 
             
 
                 
              $('li').hover(function (ev) { 
             
 
             
 
                   
              $(this).addClass('on').siblings().removeClass('on'); 
             
 
             
 
                 
              },function (ev) { 
             
 
             
 
                   
              if (!$(this).hasClass('active')) { 
             
 
             
 
                     
              $(this).removeClass('on').siblings('.active').addClass('on'); 
             
 
             
 
                   
              } 
             
 
             
 
                 
              }) 
             
 
             
 
              }) 
             
 
             
 
              </ 
              script 
              > 
             
 
             
 
              </ 
              head 
              > 
             
 
             
 
              < 
              body 
              > 
             
 
             
 
              < 
              ul  
              class 
              = 
              "nav" 
              > 
             
 
             
 
                 
              < 
              li  
              class 
              = 
              "on active" 
              >< 
              a  
              href 
              = 
              "javascript:;" 
              >导航一</ 
              a 
              ></ 
              li 
              > 
             
 
             
 
                 
              < 
              li 
              >< 
              a  
              href 
              = 
              "javascript:;" 
              >导航二</ 
              a 
              ></ 
              li 
              > 
             
 
             
 
                 
              < 
              li 
              >< 
              a  
              href 
              = 
              "javascript:;" 
              >导航三</ 
              a 
              ></ 
              li 
              > 
             
 
             
 
                 
              < 
              li 
              >< 
              a  
              href 
              = 
              "javascript:;" 
              >导航四</ 
              a 
              ></ 
              li 
              > 
             
 
             
 
                 
              < 
              li 
              >< 
              a  
              href 
              = 
              "javascript:;" 
              >导航五</ 
              a 
              ></ 
              li 
              > 
             
 
             
 
              </ 
              ul 
              > 
             
 
             
 
              </ 
              body 
              > 
             
 
             
 
              </ 
              html 
              >
Return_KB
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5鼠标悬停文字变粗,当鼠标滑过字体加粗、背景变色的CSS导航菜单
weixin_31008853的博客
06-03 2381
背景变色导航栏-http://www.webdm.cn.wrap{width:210px;margin:20px 300px;}.wrap ul,#listA li{padding:0;margin:0;list-style:none;font-size:12px;}#listA li.on{background:#ccc;background:#f6f6f6;font-weight:bold;}...
HTML---鼠标悬停导航栏变颜色
热门推荐
m0_64054560的博客
04-06 2万+
使用两种方法，实现鼠标滑过导航栏变换颜色 方法一：将<a>标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式) 方法二：给<li>标签设置：hover样式(鼠标滑过样式)
【前端】html+css实现鼠标悬浮变色导航栏 hover【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-11 3449
效果： 代码： html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作业1</title> <link rel="stylesheet" href="zuoye1.css"/> </head> <body> <div class="box"> <div class="to
php 导航点击改变颜色,JavaScript实现鼠标点击导航栏变色特效
weixin_39827304的博客
03-16 264
废话不多说了，直接给大家贴js实现鼠标点击导航栏变色代码，具体代码如下所示：JAVASCRIPT之导航栏鼠标点击变色特效body {font-size:12px;font-family: Arial, Helvetica, sans-serif;}.ts_seled {color: #F00;}.ts_sel {color:#666;}window.onload = initLinkStyle;f...
html 导航栏颜色代码,CSS实现五颜六色按钮组成的导航条效果代码
weixin_42605397的博客
06-03 1670
本文实例讲述了CSS实现五颜六色按钮组成的导航条效果代码。分享给大家供大家参考。具体如下：这里介绍一款CSS实现五颜六色按钮组成的炫丽导航菜单，其实“按钮”并不是真正的按钮元素，而是由CSS模拟出来的，这样有得你变换样式，配上黑色的背景，看上去很酷。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/html4/strict....
Jquery的hover方法让鼠标经过li时背景变色
10-26
描述中提到的“鼠标经过时让li背景变色”，是希望通过hover方法来响应用户的鼠标动作，当鼠标进入`<li>`元素的边界内，背景变为指定颜色，而当鼠标离开时，恢复原来的背景颜色。这样可以让用户更加清晰地知道他们...
HTML5文字导航菜单鼠标悬停特效
07-14
HTML5文字导航菜单鼠标悬停特效是现代网页设计中一种常见的交互元素，它能提升用户体验，使用户在浏览网站时更加便捷。这个特效利用了HTML5的新特性，结合JavaScript库如React和动画库Gsap来实现。下面我们将深入...
CSS3实现的鼠标悬浮动画过渡导航特效源码.zip
11-02
【标题】中的“CSS3实现的鼠标悬浮动画过渡导航特效源码”表明这是一个关于使用CSS3技术来创建交互式导航菜单的项目。在网页设计中，导航是关键元素，它帮助用户在网站的不同页面间穿梭。CSS3是层叠样式表...
商城导航栏，多级菜单，鼠标移动即显示子菜单
04-07
"商城导航栏，多级菜单，鼠标移动即显示子菜单"这个标题所描述的功能，是电子商务网站中常见的交互设计，它为用户提供清晰的分类浏览路径，方便他们快速找到所需的商品或服务。这种设计常见于"二手网"类网站，如当当...
鼠标悬停导航栏.zip
08-14
2. CSS文件：如`style.css`，用于定义导航栏的样式，包括颜色、字体、大小、悬浮效果等。CSS3的特性如过渡（transition）和伪类（`:hover`）可能会被用来实现鼠标悬停时的动态变化。 3. JavaScript或jQuery文件：...
CSS鼠标悬停图片上图片变灰 变色 半透明
10-08
CSS鼠标悬停图片上图片变灰 变色 半透明
php导航背景选中变色,Vue实现导航栏点击当前标签变色功能
weixin_39758956的博客
04-14 252
本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码，供大家参考，具体内容如下1.效果2.所有代码v-bind:class="{ bgColors:index==current}">{{item.time}}{{item.start}}export default {name: "Nowtime",methods: {addClass:function(index){this....
JQuery的hover()方法使鼠标指针移过导航,改变背景颜色
qq_36074044的博客
04-27 5429
$(document).ready(function() { $("#menu li").hover(function() { $(this).addClass("on"); },function(){ $(this).removeClass("on"); }); }); 鼠标移到首页               鼠标移到电影
前端——背景图片显示以及悬浮状态下变色的情况
前方一片光明
10-12 9254
前言 最近搞了一个项目，几乎全是前端的东西； 以前，前端的东西很少做，所以现在做起来比较吃力； 对于一些我认为比较难的地方，在这里专门记录一下，以便于后期遇到了可以查看 （主要是脑子记不住啊！O(∩_∩)O哈哈~） 遇到的问题以及解决 在一个div里面添加背景图片，并且在悬浮状态下变色， 这里的变色是字体和图片一起变色： HTML部分： <div class="fjxx-...
Div被鼠标划过时其背景色变色的第六种方式
qq_35119220的博客
05-24 5385
概述： 此文件将利用JS编码实现相关div图层的颜色变幻，内有onmouseover、onmouseout鼠标事件。 图示： 代码详情： target #fi
Html代码问题：用鼠标悬停在文字上文字的颜色就变颜色的效果
ruixun8的博客
07-11 2万+
这种一般是借助hover事件，就是说当鼠标放到文字上时会触发一个事件，此时可以修改文字的样式。另外一种简单的办法就是直接用css的hover属性设置样式。a.tt:hover {color: #FF0000;}------/////直接用css的hover属性设置样式。保存.css, 在html代码引用！&lt;a class="tt" href="test.html"&gt;test&lt;/a...
Web前端-JS效果-导航弹框、背景变色、鼠标移动切换等常见的js效果
ssqi's blog
02-26 3465
最近在学习JS效果，分享些实战经验。 来图镇楼！ html部分（大综合）：<body><!--1.传递一个参数--> <div id="div-color1"></div> <input type="button" value="背景变黄" onclick="changColor(this)" /> <input type="button" value="背景变红" onclic
html导航条背景颜色代码,div+css实现鼠标经过背景高亮的导航菜单代码
weixin_29554849的博客
06-03 920
本文实例讲述了div+css实现鼠标经过背景高亮的导航菜单代码。分享给大家供大家参考。具体如下：这是一款鼠标经过后切换背景的导航菜单，简单明了，给新手学习。已测试，兼容IE6、7、8、9，Firefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org...
el-menu鼠标悬浮
最新发布
07-27
- *3* [vue element ui修改导航菜单栏鼠标悬浮时的背景颜色和点击二级菜单时多出的一像素边框问题](https://blog.csdn.net/qq_43628847/article/details/120006810)[target="_blank" data-report-click={"spm":"1018...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值