Question

我正在使用带有Reactjs的CSS。我有两个同级元素：徽标和旁边的文字。我要比悬停徽标时使文本变黑。到目前为止，我还没有成功。

我尝试共享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; 
}

Answer 1

您可能不需要伪类。您可以尝试如下操作。

import React, { Component } from 'react';

export default class App extends Component {
    constructor (props) {
        super(props);

        this.state = {
            logoClass: 'logo',
            brandClass: 'brandName',
        };
    }


    handleHover = e => this.setState({ brandClass: 'brandNameHover' });

    render = () => {
        const { logoClass, brandClass } = this.state;

        return (
            <div className='App'>
                <img className={ logoClass } src={ 'test' } onMouseOver={ this.handleHover } />

                <p className={ brandClass }>Coding</p>
            </div>
        );
    }
}

Answer 2

您需要在background-color中更改logo_flex:hover。纠正程序的简化版本在这里。

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; 
}

悬停元素时如何使我的兄弟姐妹元素呈现黑色？

2 个答案: