Create-React-app 不透明度转换不起作用
Create-React-app opacity transition is not workiing
我正在尝试在鼠标悬停时添加图像的不透明度过渡。但它目前无法正常工作,我不确定为什么。
我正在使用:
- 创建反应应用程序
- bootstrap 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
查看我的代码和现场演示
您没有为 .nav-home 添加悬停效果 class。
.nav-home:hover {
opacity: 1;
}
更新的 CodeSandBox:
https://codesandbox.io/s/ik8s2
我正在尝试在鼠标悬停时添加图像的不透明度过渡。但它目前无法正常工作,我不确定为什么。
我正在使用:
- 创建反应应用程序
- bootstrap 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
查看我的代码和现场演示您没有为 .nav-home 添加悬停效果 class。
.nav-home:hover {
opacity: 1;
}
更新的 CodeSandBox: https://codesandbox.io/s/ik8s2