如何让我的兄弟元素在悬停元素时呈现黑色？
如何让我的兄弟元素在悬停元素时呈现黑色？
提问于 2018-08-05 08:07:54
我正在使用CSS和Reactjs。我有两个兄弟元素:我的标志和旁边的文字。我试图使当我悬停的标志时，文本变成黑色。到目前为止，我还没有成功。
我曾尝试共享className，但失败了。
这是我的file.js：
export default () => {
return (
<div className={style.logo_flex}>
<div>
<Link to="/">
<img className={style.logo} src={Logo} alt=""/>
</Link>
</div>
<Link to="/">
<p className={style.brandName}> Coding </p>
</Link>
</div>
)
}这是我的file.css：
/* Logo */
a{
text-decoration: none;
color: grey;
}
a:active{
border:none;
}
a:visited{
color:grey;
}
.logo_flex{
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.logo_flex:hover{
color:black;
}
.logo{
left: 7%;
top: 0.2em;
height: 2.2em;
}
p, div {
display: inline-block;
}
.brandName{
margin-left: 1.2em;
align-self: center;
}
.brandName:hover, .logo:hover{
color:black;
}回答 1
Stack Overflow用户
发布于 2018-08-05 08:38:59
您需要在logo_flex:hover中更改background-color。这里是修正后的程序的简化版本。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="logo_flex">
<div>
<img
className="logo"
src=""
/>
</div>
<p className="brandName"> Coding </p>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);风格：
a{
text-decoration: none;
color: grey;
}
a:active{
border:none;
}
a:visited{
color:grey;
}
.logo_flex{
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.logo_flex:hover{
background-color: black;
}
.logo{
left: 7%;
top: 0.2em;
height: 2.2em;
}
p, div {
display: inline-block;
}
.brandName{
margin-left: 1.2em;
align-self: center;
}
.brandName:hover, .logo:hover{
color:black;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51690482
复制相关文章
相似问题
腾讯云开发者
