无法显示<ul>：悬停在另一个<li>上

时间：2018-05-30 17:45:15

标签： html css

我尝试使用 id #cloudmenu （html第51行）获取 ul ，以便在我悬停时显示在 li 上使用 id #cloud （html中的第50行）。我写的CSS在CSS的第96-103行。

我想要特别指出的是，我希望将 #cloudmenu ul 的 display：none; 更改为 display：grid; < / em>当我将鼠标悬停在 #cloud li

上时

出于某种原因

#cloud:hover #cloudmenu
没有像我想的那样工作......

＆＃13;
＆＃13; 
struct Spending {
    var title: String
    var amount: Float
    var date: Date?
 }

class TableViewControllerSpending: UITableViewController, SpendingProtocol {
        var spendingsTemporary : [Spending] = [Spending(title: "Shoes", amount: 245.99, date: Date())]
        var spendingsPermanent : [Spending] = [Spending(title: "Taxes", amount: 125.50, date: Date())]
}
＆＃13; 
/*--------STYLE.CSS--------*/

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #424949;
  color: #f5f5f5;
  font-family: 'Alegreya Sans', sans-serif;
  margin: 0;
  overflow: hidden;
}

h2 {
  font-size: 250%;
  font-weight: 700;
  text-align: center;
  padding-top: 2%;
}

p {
  font-size: 160%;
  font-weight: 500;
  line-height: 150%;
  padding: 10px;
  /*3%*/
  text-indent: 20px;
  /*2%*/
  text-align: justify;
}

img {
  height: auto;
  width: auto;
}

header {
  background-color: #1a1a1a;
  width: 100%;
  height: 86px;
}

#header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

#logo {
  margin: 0 0 0 20px;
  padding: 0 10px 0 10px;
  /*top right bottom left*/
  float: left;
  width: 86px;
  height: 86px;
  background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}

#logo:hover {
  transition: all .1s linear;
  transform: translateY(-4px);
}

nav {
  float: right;
  padding: 4px 20px 0 0;
  height: 82px;
}

#menu-icon {
  display: none;
}

#menu-icon i {
  font-size: 240%;
  color: #f5f5f5;
  padding: 15px 20px 15px 20px;
  margin: 0 6px 0 0;
}

#menu-icon i:hover {
  color: #616a6b;
}

ul {
  list-style-type: none;
}

nav ul li {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  margin-top: -5px;
}

nav ul li a {
  color: #f5f5f5;
  text-decoration: none;
  padding: 37px 25px 22px 25px;
  display: inline-block;
}

a:hover#home,
a#homecurrent {
  color: #f5f5f5;
  background: #616a6b;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #424949;
}

a:hover#cloud,
a#cloudcurrent {
  color: #f5f5f5;
  background: #3498db;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #2874a6;
}

a:hover#paste,
a#pastecurrent {
  color: #f5f5f5;
  background: #2ecc71;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #239b56;
}

a:hover#uptime,
a#uptimecurrent {
  color: #f5f5f5;
  background: #e74c3c;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b03a2e;
}

a:hover#contact,
a#contactcurrent {
  color: #f5f5f5;
  background: #f1c40f;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b7950b;
}

#cloudmenu {
  display: none;
  position: relative;
  background: #1a1a1a;
}

#cloud:hover #cloudmenu {
  display: grid;
}

.container {
  overflow: hidden;
  width: 100%;
  height: calc(100% - 86px - 69px);
  background-color: #303030;
}

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

footer {
  background: #1a1a1a;
  width: 100%;
}

.social {
  list-style-type: none;
  text-align: center;
}

.social li {
  display: inline;
  margin: 0px -3px;
}

.social i {
  font-size: 260%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 7%;
  padding-right: 7%;
  color: #616a6b
}

.social i:hover {
  color: #f5f5f5;
  transition: all .1s linear;
  transform: translateY(-6px);
}


/*--------SMARTPHONE--------*/

@media screen and (max-width: 768px) {
  h2 {
    font-size: 150%;
  }
  header {
    z-index: +10;
    position: absolute;
    height: 66px;
  }
  #logo {
    margin: 0 0 0 10px;
    height: 66px;
    width: 66px;
  }
  #menu-icon {
    display: inline-block;
  }
  nav {
    padding: 0px;
    height: 66px;
  }
  nav ul,
  nav:active ul {
    display: none;
    z-index: -1;
    position: absolute;
    padding: 26px 20px 10px 20px;
    background: #1a1a1a;
    right: 0px;
    top: 45px;
    border-radius: 0 0 0 15px;
    width: 40%;
  }
  nav:hover ul {
    display: block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0 10px 0;
  }
  nav ul li a {
    color: #f5f5f5;
    text-decoration: none;
    padding: 15px 46px 15px 46px;
  }
  .container {
    padding-top: 66px;
    height: calc(100% - 66px - 56px);
  }
  .container video {
    display: none;
  }
  .social li {
    margin: 0px;
  }
  .social i {
    font-size: 240%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
＆＃13;
＆＃13;
＆＃13;

提前感谢您的帮助！

3 个答案:

答案 0 :(得分：1)

您当前的选择器正在选择嵌套在#cloudmenu元素中的#cloud，而不是您的HTML结构。顺便说一句，#cloud是a而不是父li（你说＆＃34;当我将鼠标悬停在＃cloud li＆＃34; ...没有＆＃34; #cloud li＆＃34;）。

您需要一个CSS同级选择器~或+。

#cloud:hover ~ #cloudmenu {
  display: grid;
}

另外，请尝试将#cloudmenu设置为position: absolute;，这样就不会闪烁。

#cloudmenu {
      display: none;
      position: absolute;
      background: #1a1a1a;
    }

这是一个小提琴（具有更大的视口）：https://jsfiddle.net/qL3Ldpad/

＆＃13;
＆＃13; 
/*--------STYLE.CSS--------*/

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #424949;
  color: #f5f5f5;
  font-family: 'Alegreya Sans', sans-serif;
  margin: 0;
  overflow: hidden;
}

h2 {
  font-size: 250%;
  font-weight: 700;
  text-align: center;
  padding-top: 2%;
}

p {
  font-size: 160%;
  font-weight: 500;
  line-height: 150%;
  padding: 10px;
  /*3%*/
  text-indent: 20px;
  /*2%*/
  text-align: justify;
}

img {
  height: auto;
  width: auto;
}

header {
  background-color: #1a1a1a;
  width: 100%;
  height: 86px;
}

#header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

#logo {
  margin: 0 0 0 20px;
  padding: 0 10px 0 10px;
  /*top right bottom left*/
  float: left;
  width: 86px;
  height: 86px;
  background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}

#logo:hover {
  transition: all .1s linear;
  transform: translateY(-4px);
}

nav {
  float: right;
  padding: 4px 20px 0 0;
  height: 82px;
}

#menu-icon {
  display: none;
}

#menu-icon i {
  font-size: 240%;
  color: #f5f5f5;
  padding: 15px 20px 15px 20px;
  margin: 0 6px 0 0;
}

#menu-icon i:hover {
  color: #616a6b;
}

ul {
  list-style-type: none;
}

nav ul li {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  margin-top: -5px;
}

nav ul li a {
  color: #f5f5f5;
  text-decoration: none;
  padding: 37px 25px 22px 25px;
  display: inline-block;
}

a:hover#home,
a#homecurrent {
  color: #f5f5f5;
  background: #616a6b;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #424949;
}

a:hover#cloud,
a#cloudcurrent {
  color: #f5f5f5;
  background: #3498db;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #2874a6;
}

a:hover#paste,
a#pastecurrent {
  color: #f5f5f5;
  background: #2ecc71;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #239b56;
}

a:hover#uptime,
a#uptimecurrent {
  color: #f5f5f5;
  background: #e74c3c;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b03a2e;
}

a:hover#contact,
a#contactcurrent {
  color: #f5f5f5;
  background: #f1c40f;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b7950b;
}

#cloudmenu {
  display: none;
  position: absolute;
  background: #1a1a1a;
}

#cloud:hover ~ #cloudmenu {
  display: grid;
}

.container {
  overflow: hidden;
  width: 100%;
  height: calc(100% - 86px - 69px);
  background-color: #303030;
}

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

footer {
  background: #1a1a1a;
  width: 100%;
}

.social {
  list-style-type: none;
  text-align: center;
}

.social li {
  display: inline;
  margin: 0px -3px;
}

.social i {
  font-size: 260%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 7%;
  padding-right: 7%;
  color: #616a6b
}

.social i:hover {
  color: #f5f5f5;
  transition: all .1s linear;
  transform: translateY(-6px);
}


/*--------SMARTPHONE--------*/

@media screen and (max-width: 768px) {
  h2 {
    font-size: 150%;
  }
  header {
    z-index: +10;
    position: absolute;
    height: 66px;
  }
  #logo {
    margin: 0 0 0 10px;
    height: 66px;
    width: 66px;
  }
  #menu-icon {
    display: inline-block;
  }
  nav {
    padding: 0px;
    height: 66px;
  }
  nav ul,
  nav:active ul {
    display: none;
    z-index: -1;
    position: absolute;
    padding: 26px 20px 10px 20px;
    background: #1a1a1a;
    right: 0px;
    top: 45px;
    border-radius: 0 0 0 15px;
    width: 40%;
  }
  nav:hover ul {
    display: block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0 10px 0;
  }
  nav ul li a {
    color: #f5f5f5;
    text-decoration: none;
    padding: 15px 46px 15px 46px;
  }
  .container {
    padding-top: 66px;
    height: calc(100% - 66px - 56px);
  }
  .container video {
    display: none;
  }
  .social li {
    margin: 0px;
  }
  .social i {
    font-size: 240%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
＆＃13; 
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
	My small cozy website.
		© veryslothysloth 2018
-->

<head>
  <!-- Links -->
  <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
  <link rel="manifest" href="site.webmanifest">
  <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  <!-- Open Graph Protocol -->
  <meta property="og:url" content="https://slothy.cloud">
  <meta property="og:type" content="website">
  <meta property="og:title" content="slothy.cloud | by veryslothysloth">
  <meta property="og:description" content="A small slothy website.">
  <meta property="og:image" content="https://slothy.cloud/img/slothyicon.png">

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
  <meta name="twitter:description" content="A small slothy website.">
  <meta name="twitter:image" content="https://slothy.cloud/img/slothyicon.png">

  <!-- Data -->
  <title>slothy.cloud | by veryslothysloth</title>
  <meta charset="utf-8">
  <meta name="description" content="A small slothy website.">
  <meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#616a6b">
</head>

<body>
  <header>
    <!-- Header -->
    <div id="header-inner">
      <a href="index.html" id="logo"></a>
      <nav>
        <a href="#" id="menu-icon"><i class="fas fa-bars"></i></a>
        <ul>
          <li><a href="https://slothy.cloud/" id="homecurrent">Home</a></li>
          <li><a href="https://safe.slothy.cloud/" id="cloud">Cloud</a>
            <ul id="cloudmenu">
              <li><a href="https://safe.slothy.cloud/" id="cloud">Frontpage</a></li>
              <li><a href="https://safe.slothy.cloud/dashboard/" id="cloud">Dashboard</a></li>
              <li><a href="https://safe.slothy.cloud/faq" id="cloud">FAQ</a></li>
              <li><a href="https://github.com/WeebDev/lolisafe" id="cloud">On Github</a></li>
            </ul>
          </li>
          <li><a href="https://paste.slothy.cloud" id="paste">Paste</a></li>
          <li><a href="https://uptime.slothy.cloud" target="_blank" id="uptime">Uptime</a></li>
          <li><a href="https://slothy.cloud/contact.html" id="contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <!-- Main Body -->
  <div class="container" id="container">
    <video autoplay muted loop src="" id="backgroundVid" type="video/mp4" alt="Background_Video" media="min-width: 768px"></video>
    <img src="" id="backgroundImg" type="image/jpg" alt="Background_Image">
    <!-- Random Background Script -->
    <script>
      var backgrounds = ['alley0', 'alley1', 'neonsigns0', 'neonsigns1', 'shrine0']
      var background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
      document.getElementById('backgroundVid').src = 'img/background/' + background + '.mp4';
      document.getElementById('backgroundImg').src = 'img/background/' + background + '.jpg';
    </script>
    <!--<div class="container-inner">
				<p>Test Text</p>
			</div>-->
  </div>


  <!-- Footer -->
  <footer>
    <ul class="social">
      <li><a href="https://twitter.com/veryslothysloth" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.instagram.com/veryslothysloth/" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://steamcommunity.com/id/veryslothysloth" target="_blank"><i class="fab fa-steam"></i></a></li>
      <li><a href="https://github.com/veryslothysloth" target="_blank"><i class="fab fa-github"></i></a></li>
      <!--<li><a href="mailto:contact@slothy.cloud" target="_blank"><i class="fas fa-at"></i></a></li>-->
    </ul>
  </footer>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

由于您的#cloudmenu不是#cloud的孩子，而是兄弟姐妹，因此需要兄弟组合（+或~） ：

#cloud:hover ~ #cloudmenu {
  position: absolute;
  display: grid;
}

JSFiddle demo

答案 2 :(得分：1)

e.Group("/admin").Use(middleware.BasicAuth(func(username, password string, c echo.Context) (bool, error) {
    if username == "joe" && password == "secret" {
        return true, nil
    }
    return false, nil
}))

/*--------STYLE.CSS--------*/

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #424949;
  color: #f5f5f5;
  font-family: 'Alegreya Sans', sans-serif;
  margin: 0;
  overflow: hidden;
}

h2 {
  font-size: 250%;
  font-weight: 700;
  text-align: center;
  padding-top: 2%;
}

p {
  font-size: 160%;
  font-weight: 500;
  line-height: 150%;
  padding: 10px;
  /*3%*/
  text-indent: 20px;
  /*2%*/
  text-align: justify;
}

img {
  height: auto;
  width: auto;
}

header {
  background-color: #1a1a1a;
  width: 100%;
  height: 86px;
}

#header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

#logo {
  margin: 0 0 0 20px;
  padding: 0 10px 0 10px;
  /*top right bottom left*/
  float: left;
  width: 86px;
  height: 86px;
  background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}

#logo:hover {
  transition: all .1s linear;
  transform: translateY(-4px);
}

nav {
  float: right;
  padding: 4px 20px 0 0;
  height: 82px;
}

#menu-icon {
  display: none;
}

#menu-icon i {
  font-size: 240%;
  color: #f5f5f5;
  padding: 15px 20px 15px 20px;
  margin: 0 6px 0 0;
}

#menu-icon i:hover {
  color: #616a6b;
}

ul {
  list-style-type: none;
}

nav ul li {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  margin-top: -5px;
}

nav ul li a {
  color: #f5f5f5;
  text-decoration: none;
  padding: 37px 25px 22px 25px;
  display: inline-block;
}

a:hover#home,
a#homecurrent {
  color: #f5f5f5;
  background: #616a6b;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #424949;
}

li:hover#cloud,
a#cloudcurrent {
  color: #f5f5f5;
  background: #3498db;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #2874a6;
}

a:hover#paste,
a#pastecurrent {
  color: #f5f5f5;
  background: #2ecc71;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #239b56;
}

a:hover#uptime,
a#uptimecurrent {
  color: #f5f5f5;
  background: #e74c3c;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b03a2e;
}

a:hover#contact,
a#contactcurrent {
  color: #f5f5f5;
  background: #f1c40f;
  transition: all .1s linear;
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #b7950b;
}

#cloudmenu {
  display: none;
  position: absolute;
  background: #1a1a1a;
}

#cloud:hover #cloudmenu {
  display: grid;
}

.container {
  overflow: hidden;
  width: 100%;
  height: calc(100% - 86px - 69px);
  background-color: #303030;
}

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.container-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

footer {
  background: #1a1a1a;
  width: 100%;
}

.social {
  list-style-type: none;
  text-align: center;
}

.social li {
  display: inline;
  margin: 0px -3px;
}

.social i {
  font-size: 260%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 7%;
  padding-right: 7%;
  color: #616a6b
}

.social i:hover {
  color: #f5f5f5;
  transition: all .1s linear;
  transform: translateY(-6px);
}

/*--------SMARTPHONE--------*/

@media screen and (max-width: 768px) {
  h2 {
    font-size: 150%;
  }
  header {
    z-index: +10;
    position: absolute;
    height: 66px;
  }
  #logo {
    margin: 0 0 0 10px;
    height: 66px;
    width: 66px;
  }
  #menu-icon {
    display: inline-block;
  }
  nav {
    padding: 0px;
    height: 66px;
  }
  nav ul,
  nav:active ul {
    display: none;
    z-index: -1;
    position: absolute;
    padding: 26px 20px 10px 20px;
    background: #1a1a1a;
    right: 0px;
    top: 45px;
    border-radius: 0 0 0 15px;
    width: 40%;
  }
  nav:hover ul {
    display: block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0 10px 0;
  }
  nav ul li a {
    color: #f5f5f5;
    text-decoration: none;
    padding: 15px 46px 15px 46px;
  }
  .container {
    padding-top: 66px;
    height: calc(100% - 66px - 56px);
  }
  .container video {
    display: none;
  }
  .social li {
    margin: 0px;
  }
  .social i {
    font-size: 240%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

相关问题
最新问题