个人中心
gpt4 book ai didi

javascript - 菜单 我无法上类

转载 作者：行者123 更新时间：2023-11-28 18:34:32 25 4
gpt4 key购买 nike

我无法让这段代码工作 - 我想要的是当我将鼠标悬停在圆圈上时，菜单会出现，然后如果我将鼠标从圆圈或菜单上移开，它就会消失。我尝试做的任何事情都是非常错误的，例如 onmouseover 在圆圈上然后在菜单上 onmouseout 在我离开圆圈后菜单似乎消失了，我尝试使用除 Divs 之外的其他构造但仍然没有运气，不知所措我决定发布在这里看看是否有人可以提供帮助。请在下面找到代码:

JS:

<script>

function circleAnimOn() {
    //show menu
    document.getElementById("cssmenuDiv").style.display="block";
    document.getElementById("cssmenuDiv").style.visibility="visible";
}

function circleAnimOff() {
    //hide menu
    document.getElementById("cssmenuDiv").style.display="none";
    document.getElementById("cssmenuDiv").style.visibility="hidden";
}
</script>

HTML:

<body>

<div class="divCircle" id="divCircle" onMouseOver="circleAnimOn();">
</div>

<div class="cssmenuDiv" id="cssmenuDiv"><!-- cssmenuDiv -->

<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

</div><!-- cssmenuDiv -->

CSS:

body {

  text-align:center;
}

#divCircle
{
    width:30px;
    height:30px;
    background-color:#CCC;
    margin-left:auto;
    margin-right:auto;
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
} 

#divCircle:hover {
    background-color:#093;  
}

#circle { width: 50px; height: 50px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}

.cssmenuDiv {
    display:none;
    visibility:hidden;
    margin-left:750px;

}

/* Some stylesheet reset */
#cssmenu > ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
}

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 150px;   
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted #fff;
            border-bottom: 1px dotted #d9d9d9;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: #3dafea;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 0 #fff;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: #eaeaea;
        }

        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom: 0;
        }


        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: #fff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: #54cdf1;
            background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
            background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
            background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
            background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
            border-color: transparent;
        }

        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #3dafea; 
        }

        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #fff;
        }

        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid #fff;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid rgba(0, 0, 0, .25);
        }


        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }

在此先感谢您的帮助!

最佳答案

举个例子...

http://jsfiddle.net/5hnDn/5/

忘掉js，不需要...

<div class="divCircle" id="divCircle">
<div id='cssmenu'>    
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>

...

只有下面显示的规则变化...

#divCircle {
    position: relative;
} 

#divCircle:hover #cssmenu {
    display: block;
}
#cssmenu {
    position: absolute;
    top: 30px;
    left: -60px;
}

#cssmenu > ul{
    padding: 10px 0 0 0;
}

关于javascript - 菜单 我无法上类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13196146/

25 4 0
文章推荐： javascript - 如何使用 JavaScript 使背景图像透明
文章推荐： javascript - 已将 div 文本插入输入字段并需要知道 div 是否为空？
文章推荐： ios - 如何使用 UITabBarController 为每个选项卡使用相同的 ViewController？
文章推荐： ios - IBOutletCollection 和标签属性