悬停时悬停菜单不会打开

时间：2019-04-03 10:29:03

标签： html css menu hover

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

当我将鼠标悬停时，我想打开底部菜单上的按钮之一。

这感觉像是一个简单的任务，但我似乎无济于事。 我缺少什么，我做了很多研究，但似乎找不到解决方法。

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

在此版本中，我尝试了可见性：隐藏；和可见性：可见；显示它。

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

.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类），但是什么也没做。

我有办法调试吗？

2 个答案:

答案 0 :(得分：0)

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>

答案 1 :(得分：-1)

按原样保留代码，您可以添加以下JavaScript代码以实现结果

var popup = document.querySelector('.settings_popup')
var trigger = document.querySelector('.navbar')
trigger.addEventListener('mouseover', () => {
    popup.style.visibility = 'visible'
})
trigger.addEventListener('mouseleave', () => {
    popup.style.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;
}
<!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>

相关问题
最新问题