如何添加 jQuery 功能悬停（显示）然后点击显示另一个菜单

Question

你好我想问一下jQuery

如何将 jQuery 悬停（显示）功能添加到我的 jQuery？（我想在悬停该区域时显示#menuwrap）

2.I想添加jQuery功能，当我点击MENU时，它会再次隐藏#menuwrap并显示另一个菜单内容

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tes - Web Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/tes.js"></script>
        <link rel="stylesheet" type="text/css" href="css/tes.css">
</head>
<body>

<div id="titletext">
<h1>... Test ...</h1>   
</div>

<div id="menuwrap">
<div id="menu">
<div id="menu1">

</div>

</div>
<div id="menutext">
<h1 id="menucontent" a href="xxx">MENU</h1>
</div>
</div>

</body>
</html>

我的CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
    margin: 0px !important;
    padding: 0px !important;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

html {
    min-width: 10%;
    min-height: 10%;
}

body {
    z-index: -1;
    background-attachment: fixed;
    background-color: #17807a;
}

#titletext {
    position: fixed;
    z-index: 1;
    margin-top: 0px !important;
    padding-top: 0px !important;
    height: 70px;
    background-color: #ffffff;
}

#titletext h1 {
    margin: 0px auto;
    text-align: center;
    color: #0e4e4b;
    font: 40px 'Montserrat';
}

#menuwrap {
    position: fixed;
    top: 550px;
    left: 640px;
}

#menu {
    display: block;
    position: fixed;
    height: 100px;
    width: 100px;
    border-radius: 70px;
    border-width: 5px;
    border-style: solid;
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: transparent;
    border-right-color: transparent;

    -moz-animation: cw;
    -moz-animation: cw 5s infinite;
}

#menu1 {
    position: absolute;
    height: 70px;
    width: 70px;
    border-radius: 60px;
    border-width: 5px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #ffffff;
    border-right-color: #ffffff;

    top: 10px;
    left: 10px;

    -moz-animation: ccw;
    -moz-animation: ccw 3s infinite;
}

#menutext {
    position: absolute;

    top: 27px;
    left: 27px;
}

#menutext h1 {
    position: absolute;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 3px;
    top: 19px;
    left: 4px;

}

@-moz-keyframes cw {
    0%{
        -moz-transform: rotate(0deg); }
    100%{
        -moz-transform: rotate(360deg); }
  }

@-moz-keyframes ccw {
    0%{
        -moz-transform: rotate(0deg); }
    100%{
        -moz-transform: rotate(-540deg); }
  }

我的jQuery

jQuery(function() {
    setTimeout("jQuery('#menuwrap').fadeOut('2000');", 3000);
});

提前致谢:)

Answer 1

您可以使用 fadeTo() 函数完成此任务：

setTimeout(function () {
    $('#menuwrap').fadeTo('slow', 0);
}, 3000);

$('#menuwrap').hover(function () {
    $(this).fadeTo('slow', 1);
}, function () {
    $(this).fadeTo('slow', 0);
});

演示：https://jsfiddle.net/sruLsr37/2/

如何添加 jQuery 功能悬停（显示）然后点击显示另一个菜单

How to add jQuery function to hover (show) and then click to show another menu

html

javascript

css

jquery

hover