Hover меню не открывается, при наведении - PullRequest
Новая
       49

Hover меню не открывается, при наведении

0 голосов
/ 03 апреля 2019

Я создаю страницу, выглядящую как приложение.

Я хочу, чтобы одна из моих кнопок в меню внизу открывалась, когда я наводил курсор мыши.

Это похоже на простую задачуНо ничего, что я делаю, похоже не работает.Что я пропустил, я провел много исследований, но, кажется, не могу найти решение.

Я пытался использовать дисплей: нет;скрыть всплывающий список и отобразить: блок;чтобы показать это.

в этой версии я пробовал видимость: скрыто;и видимость: видимая;чтобы показать это.

Я не уверен, где моя проблема, но это может быть, мой селектор неправильно написан? 

.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 голосов
/ 03 апреля 2019 

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>
0 голосов
/ 03 апреля 2019

Сохраняя ваш код как есть, вы можете добавить следующий код 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>
...