下拉Div在html和css(可能是javascript?)

Dropdown Div in html and css (possibly javascript?)

本文关键字：javascript Div html css 下拉更新时间：2023-09-26

我正在为一个世界历史项目设计一个简单的网页，基本上我有每个人的div，当我在每个人的div上悬停时，我希望有一个下拉div，详细说明他们的传记。我正在考虑使用:hover，但我所尝试的一切都不起作用。

这是我的html:

<!doctype html>
<html>
    <head>
        <title>Women of the American Revolution</title>
        <link rel="stylesheet" href="styles.css">
      <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur20.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur20.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2005/07/26/cur20.html" target="_blank" title="American Flag"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="American Flag" style="position:absolute; top: 0px; right: 0px;" /></a>
    </head>
    <body>
        <center><h1 id = "h1">Women of the American Revolution</h1></center>
        <center><div id = "stage">
            <div id = "abigailAdams"><p>Abigail Adams</p></div>
            <div id = "hannahBlair"><p>Hannah Blair</p></div>
            <div id = "margaretCorbin"><p>Margaret Corbin</p></div>
            <div id = "maryDraper"><p>Mary Draper</p></div>
            <div id = "betsyRoss"><p>Betsy Ross</p></div>
            <div id = "maryLHMcCauley"><p>Mary Ludwig Hays McCauley (Molly Pitcher)</p></div>
            <div id = "estherReed"><p>Esther Reed</p></div>
            <div id = "deborahSamson"><p>Deborah Samson</p></div>
            <div id = "mercyOtisWarren"><p>Mercy Otis Warren</p></div>
            <div id = "marthaWashington"><p>Martha Washington</p></div>
        </div></center>

        <script>
        </script>
    </body>
</html>

这是我的css:

@font-face
{
    font-family: requited-script-demo;
    src: url("requited-script-demo.regular.ttf");
}
    body {
   background-image: url("seamless.png");
    }
#h1 {
    border-radius: 50px;
    width: 700px;
    height: 50px;
    position: relative;
    padding: 10px;
    font-family: requited-script-demo;
    color: white;
    text-shadow: 2px 2px black;
    background-image: url("blackseam.jpg");
     text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               box-shadow: 15px 15px 10px #888888;
}
#stage {
    position: relative;
    height: 2000px;
    width: 1000px;
    box-shadow: 10px 10px 5px #888888;
}
#abigailAdams {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("abigailAdams.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#hannahBlair {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("hannahBlair.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#margaretCorbin {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("margaretCorbin2.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#maryDraper {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("maryDraper.png");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#betsyRoss {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("betsyRoss.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#maryLHMcCauley {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("maryMcCauley.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#estherReed {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image:url("estherReed.jpg");
    font-size: 36px;
    text-align: right;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#deborahSamson {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("deborahSamson.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#mercyOtisWarren {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("mercyWarren.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}
#marthaWashington {
    border-radius: 10px;
    padding: 10px;
    height: 200px;
    background-image: url("marthaWashington.jpg");
    font-size: 36px;
    text-align: left;
    font-family: requited-script-demo;
    box-shadow: 15px 15px 10px #888888;
}

p {
    color: white;
    text-shadow: 2px 2px black;
}

如果需要，这就是页面的样子

理想的菜单结构应该有层次结构，如:

<nav id="top-menu">
    <span>Women of the American Revolution</span>
    <ul>
        <li>Abigail Adams</li>
        <!-- Other menu items -->
    </ul>
</nav>

你的CSS打开和关闭它可能看起来像:

#top-menu > ul {
    display: none;
}
#top-menu:hover > ul {
    display: block;
}

对于您提供的HTML，您可以将两个<center>标签包装在一个Element下。然后隐藏第二个CenterElement。当鼠标悬停在父Element上时，可以使菜单出现。

请在这里的例子:http://codepen.io/rooyva/pen/c6941206234e048e3bdc7e6f4b08a8b8

这是示例中可用的CSS:

#top-menu .menu {
    display: none;
}
#top-menu:hover .menu {
  display: block;
}