建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > 单独设置鼠标经过li里面a标签样式

单独设置鼠标经过li里面a标签样式

时间:2016-11-19 11:25:10  来源:免费模板网 作者:风雪 阅读次数 tags样式鼠标css

自己写页面的时候。遇到鼠标经过,给当前的li添加样式。用css和js代码都可以实现,下面贴上代码
<div class="nav">
  <div class="nav1 w100">
        <ul>
            <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>
 
        </ul>
     </div>
 
</div>
<script>
 
$(function(){
$('.nav1 li').hover(function(){
      $(this).addClass('nava');  
      $(this).find('a').addClass('navh');
             
    },
    function(){
      $(this).removeClass('nava');  
      $(this).find('a').removeClass('navh');
    })
 
})
 
</script>
然后是css代码

.nav1 ul li a{color: white} 
.nava{background: white;}
.navh{color:#1d1c1c;}

遇到个问题  鼠标经过怎么让a标签里面的文字变黑,之前想到用js 追加样式,但是css水平有限,忘记怎么写了。于是换个思路用css代理里面的hover解决

.nav1 li a:hover{font-weight: bold;color: black;}

单独定义ul 里面li鼠标经过的颜色就好了

本文地址:https://www.freemoban.com/bjrm/2016/1119/2731.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,我们会及时删除侵权内容,联系QQ:1615187561 谢谢合作!