zoukankan      html  css  js  c++  java
  • 二级图片导航效果

    导航为图片且切换时也需图片,带下拉二级菜单的,图片选中前后状态要求规则命名,id不能在同一文件里重复出现

    $("#menunav li").each(function () {

        $(this).mouseover(function () {
      
         $(this).find(".subnav").show();
         $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menu_", "menuhover_"));
         

         $(this).hover(function () {
         }, function () {
          $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menuhover_", "menu_"));
          $(this).find(".subnav").hide();
      
         });
        })
        });

    注意mousehover(当鼠标点击子菜单时主导航仍处于选中状态)同hover的区别

    <ul class="menunav">
                <li><a href="" rel="images/menuhover_05.gif"><img src="images/menu_05.gif" alt="教学成果"/></a>
                 <ul class="subnav"  style="display:none;">
                     <li><a href="#">安全宝典</a></li>
                        <li><a href="#" class="cur">创意体能活动</a></li>
                        <li><a href="#">音频视频</a></li>
                    </ul>
                </li>

            </ul>

  • 相关阅读:
    家目录,Linux常用命令概述
    Day003_Linux基础——系统目录结构
    Day002_LInux基础_常用命令_001
    Day002_LInux基础_常用命令
    Linux_Day001-002章常用命令
    Linux基础Day001-001章
    pycharm单行及多行注释快捷键
    配置ospf的路由器连通配置静态路由的路由器
    python--闭包
    主机数和可用主机数计算
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2483124.html
Copyright © 2011-2022 走看看