CSS- 悬停时下拉菜单透明背景，但我想从动画开始时使用不透明颜色

Question

我是 CSS 的新手，我设置了一个下拉菜单。悬停时，下拉菜单具有透明背景。如何从动画开始就用不透明的颜色制作背景？我已经尝试了几种配置，但 none 有效：到目前为止，我的下拉菜单在放下时具有透明背景。

更新：好吧，悬停从一开始就是不透明的，但文本淡出仍然存在延迟。到目前为止，文本仍然留在下拉菜单后面，然后残酷地消失了。也许有人有解决这个问题的提示？

这里是我的codesandbox：https://codesandbox.io/s/93kz5pmzp4你会看到透明颜色有点滞后然后会变得不透明。我从一开始就有不透明。

import React from 'react'
import style from "./Menu.module.css"; 

export default (props) => {
  return (
    <div className={style.menu}>
        <div> Current link </div>
        <div className={style.menu__container}>
          <button className={style.menu__button}>Dropdown</button>
          <div className={style.menu__content}>
            <Link /* className={style.link} */ to="/portfolio/">Portfolio {props.portfolio}</Link>
            <Link to="/blog/">Blog {props.blog}</Link>
            <Link to="/prestations/">Prestations {props.prestations}</Link>
            <Link to="/aboutus/">About us {props.aboutus}</Link>
            <Link to="/contact/">Contact {props.contact}</Link> 
          </div>
       </div>
    </div>
  )
}

 /* MENU */

    .menu{ 
      margin-left: 15%;
      margin-top: -0.5em;
      transition: width 2s;
    }


    /* The container <div> - needed to position the dropdown content */
    .menu__container{
      position: relative;
      display: inline-block;
    }

  /* Dropdown Button */
  .menu__container .menu__button {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }

   /* Change the background color of the dropdown button when the dropdown content is shown */
   .menu__container:hover .menu__button {
    background-color: #3e8e41;}


  /* Dropdown Content (Hidden by Default) */
  .menu__content {
   /*  display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; */

    visibility: hidden; /* hides sub-menu */
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* make content 2em higher than container */
    transform: translateY(-2em);

    z-index: -1;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  }

    /* Show the dropdown menu on hover */
    .menu__container:hover .menu__content {
      /* display: block; */
      visibility: visible; /* shows sub-menu */
      background-color: white; 
      opacity: 1;
      z-index: 1;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.3s; }

  /* Links inside the dropdown */
  .menu__content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
  .menu__content a:hover {background-color: white;}

任何提示都很好，谢谢

Answer 1

您的 Z-index 的转换正在影响它。你可以想象它就像 div 慢慢地一点一点地走到文本前面。

我认为这个代码笔可能有助于解释这一点。

https://codepen.io/chriscoyier/pen/gboJf

<div class="wall wall-1"></div>
<div class="wall wall-2"></div>
<div class="wall wall-3"></div>

CSS- 悬停时下拉菜单透明背景，但我想从动画开始时使用不透明颜色

CSS- dropdown menu transparent background when hovering but I want an opaque color from the beginning of animation

javascript

css

reactjs