个人中心
gpt4 book ai didi

html - 悬停菜单不会打开，悬停

转载 作者：行者123 更新时间：2023-11-28 15:07:14 29 4
gpt4 key购买 nike

我正在创建一个应用外观页面。

我希望在鼠标悬停时打开底部菜单上的其中一个按钮。

这感觉像是一项简单的任务，但我所做的一切似乎都不起作用。我错过了什么，我做了很多研究，但似乎找不到解决方案。

我尝试使用 display: none;隐藏弹出列表，并显示: block ；显示它。

在这个版本中，我尝试了 visibility: hidden;和可见性:可见；显示它。

我不确定我的问题出在哪里，但可能是我的悬停选择器写错了？

.navbar {
  overflow: hidden;
  background-color: #226949;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -8px;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 17px;
}

.navbar img {
  float: left;
  display: block;
  color: #f2f2f2;
  padding: 10px 12px;
  text-decoration: none;
}

.navbar a:hover {
  background: #184e34;
  color: white;
}

.navbar img:hover {
  background: #184e34;
}

.All_Content {
  text-align: center;
  font-size: 42px;
}

.settings_popup {
  overflow: hidden;
  background-color: #226949;
  position: fixed;
  bottom: 52px;
  height: 160px;
  width: 130px;
  right: 0;
  border-radius: 15px;
  border-style: solid;
  border-color: #184e34;
  visibility: hidden;
  z-index: 1;
}

.settings_popup a {
  text-align: center;
  display: block;
  padding: 10px;
  margin: 2px;
  text-decoration: none;
  color: white;
  font-size: 17px;
  margin-left: -37px;
  background-color: #226949;
  border-radius: 5px;
}

.settings_popup a:hover {
  background: #184e34;
}

.navbar ul a:hover .settings_popup {
  visibility: visible;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>App</title>
</head>

<body>
  <div class="All_Content">
    <div>Overview</div>
    <p>asdasd1</p>
    <p>asdasd2</p>
    <p>asdasd3</p>
    <p>asdasd4</p>
    <p>asdasd5</p>
    <p>asdasd6</p>
    <p>asdasd7</p>
    <p>asdasd8</p>
    <p>asdasd9</p>
    <p>asdasd10</p>
  </div>
  <div>
    <div class="settings_popup">
      <ul>
        <li><a class="link" href="#">Account</a></li>
        <li><a class="link" href="#">Settings</a></li>
        <li><a class="link" href="#">Logout</a></li>
      </ul>
    </div>
    <div class="navbar">
      <a class="dash_a" href="#">Dashboard</a>
      <a href="#">Statistics</a>
      <a href="#">Logout</a>
      <div class="cogwh">
        <img src="../../img/4200781-32.png">
      </div>
    </div>
  </div>
</body>

</html>

我想让菜单弹出(类 settings_popup)，但它什么也没做。

有什么方法可以调试吗？

最佳答案 

li{
list-style:none}
.navbar {
    overflow: hidden;
    background-color: #226949;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left: -8px;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 17px;
}

.navbar img {
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 10px 12px;
    text-decoration: none;
}
.navbar img:hover {
    background: #184e34;
}

.All_Content {
    text-align: center;
    font-size: 42px;
}

.settings_popup {
    overflow: hidden;
    background-color: #226949;
    position: inherit;
    bottom: 52px;
    height: 160px;
    width: 130px;
    right: 0;
    border-radius: 15px;
    border-style: solid;
    border-color: #184e34;
    visibility:hidden;

}

.settings_popup a:hover {
    background: #184e34;
}
.navbar a:hover~.settings_popup{
    visibility:visible;
}
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>App</title>
    </head>
    <body>
        <div class="All_Content">
            <div>Overview</div>
            <p>asdasd1</p>
            <p>asdasd2</p>
            <p>asdasd3</p>
            <p>asdasd4</p>
            <p>asdasd5</p>
            <p>asdasd6</p>
            <p>asdasd7</p>
            <p>asdasd8</p>
            <p>asdasd9</p>
            <p>asdasd10</p>
        </div>
            
            <div class="navbar">
                <a class="dash_a" href="#">Dashboard</a>
                <a href="#">Statistics</a>
                
                <a href="#">Logout</a>
                
                <div class="cogwh">
                    <img src="../../img/4200781-32.png">
                </div>
                <div class="settings_popup">
                  <ul>
                      <li><a href="#">Account</a></li>
                      <li><a ref="#">Settings</a></li>
                      <li><a  href="#">Logout</a></li>
                  </ul>
              </div>
            </div>
    </body>
</html>

关于html - 悬停菜单不会打开，悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55492935/

29 4 0
文章推荐： javascript - 如何通过按回车按钮将焦点设置在下一个 "enable"输入框上
文章推荐： javascript - 为什么它返回未定义？
文章推荐： javascript - javascript 和 jquery 的不同行为
文章推荐： javascript - 中间的内容