Create-React-app不透明过渡无法正常工作

Question

我试图在鼠标悬停时添加图像的不透明度过渡。但这目前无法正常工作，我不确定为什么。

我正在使用：

• create-react-app
• 引导程序4

相关的JS位于Fotter.js中，或者这样：

import React from "react";
import "react-jsx-html-comments";

import "./styles.css";
import logformik from "../../img/formik-mark.png";

class Footer extends React.Component {
  render() {
    return (
      <div>
        <h1>inside footer</h1>
        <footer>
          <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <section className="d-flex flex-column flex-md-row justify-content-around w-100 sitemap">
              <a href="#" className="nav-home">
                <img src=src={logformik} alt="Formik" width="66" height="58"></img>
              </a>
            </section>
          </nav>
        </footer>
        <br />
        <br />
      </div>
    );
  }
}

export default Footer;

相关的CSS在styles.css中，或者这样：

.sitemap {
  background-color: black;
}

.sitemap h5 {
  color: #fff;
}

.nav-home {
  display: table;
  height: 72px;
  margin: -12px 20px 0 0;
  opacity: 0.4;
  padding: 10px;
  width: 72px;
  -webkit-transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  -ms-transition: opacity .15s ease-in-out;
  -o-transition: opacity .15s ease-in-out;
  transition: opacity 1s ease-in-out;
}

您可以在此codesandbox link

签出我的代码和现场演示

Answer 1

您没有为.nav-home类添加悬停效果。

.nav-home:hover {
  opacity: 1;
}

更新的CodeSandBox： https://codesandbox.io/s/ik8s2