Question

我是CSS的新手，我试图创建一个非常基本的导航栏。

我的HTML和CSS如下。

问题是，当我将鼠标悬停在“功能”选项卡上时，即使我将import 'package:flutter/material.dart'; import './../../models/ch_departure.dart'; class DepartureCell extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: ListView.builder( padding: EdgeInsets.all(8.0), itemCount: 10, itemBuilder: (context, index) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox( width: double.infinity, height: 50.0, child: ListTile( title: Text("Test"), onTap: () {}, trailing: Text("Test2"), ), ) ], ); } ), ); } }的显示从悬停更改为不显示也没有任何反应。

我无法在代码中找到任何错误。谁能告诉我我哪里出问题了？

feature-menu

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown span:hover .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  left: 990px;
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

Answer 1

让我们检查一下您的HTML结构。

这是相关部分：

<ul type="none" class='menu'>
   <li class='dropdown'><span>Features ▾</span></li>
   <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
   </ul>
   <li><a href='#'>Blog</a></li>
    .
    .
    .

这是您要应用的CSS选择器：

.dropdown span:hover .features-menu

所以问题很明显。

您要从一个级别（.dropdown）开始，向下一个级别（到达span），然后再向上一个级别（到达.features-menu）。

您正试图从位于HTML结构下方的元素定位.features-menu。 CSS不能那样工作。

CSS只能向下或向前瞄准。它不能向上或向后定位。

这些概念在这些帖子中进行了详细说明：

您可以通过使用同级组合器（+或~）定位“前进”（使用原始的-格式错误的HTML）来进行悬停工作。

.dropdown:hover + .features-menu

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover + .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
    <ul class='features-menu'>
      <li><a href='#'>Harder</a></li>
      <li><a href='#'>Better</a></li>
      <li><a href='#'>Faster</a></li>
      <li><a href='#'>Stronger</a></li>
    </ul>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

或者，您可以通过使用后代选择器（>或[space]）定位“向下”（使用正确格式的HTML）来使悬停行为有效。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  background: #D6E9FE;
  position: fixed;
  width: 100%;
  padding: 50px;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  padding: 20px;
  margin-right: 15px;
}

body {
  height: 1200px;
  font-size: 18px;
  font-family: sans-serif;
  color: #5D6063;
}

.dropdown:hover > .features-menu {
  display: flex;
  flex-direction: column;
  background: #B2D6FF;
  border-radius: 5px;
  padding-top: 60px;
  position: absolute;
  top: 50px;
  /* left: 990px; */
}

.features-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown>span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

.features-menu {
  z-index: 1;
  display: none;
}

<div class='header'>
  <div class='logo'><img src='...' /></div>
  <ul type="none" class='menu'>
    <li class='dropdown'><span>Features ▾</span>
      <ul class='features-menu'>
        <li><a href='#'>Harder</a></li>
        <li><a href='#'>Better</a></li>
        <li><a href='#'>Faster</a></li>
        <li><a href='#'>Stronger</a></li>
      </ul>
    </li><!-- closing tag goes here -->
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Subscribe</a></li>
    <li><a href='#'>About</a></li>
  </ul>
</div>

CSS悬停不呈现

1 个答案: