Is there a way to make my siblings' elements turn black when hovering over an element?

Question

Is there a way to make my siblings' elements turn black when hovering over an element?

Currently, I am working on CSS within Reactjs. In my project, I have two sibling elements: a logo and a text placed beside it. My goal is to have the text turn black when I hover over the logo, but so far, I have been unsuccessful in achieving this effect.

I attempted to share a className between the elements, but this approach did not work as expected.

Below is a snippet from my 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>
  )
}

Here is the portion of my file.css responsible for styling:

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

javascript css reactjs

Answer 1

Answer №1

Try this alternative approach instead of using Pseudo-classes.

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

Try this alternative approach instead of using Pseudo-classes.

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 3

Answer №2

In order to update the appearance of logo_flex:hover, you must modify the background-color. A simplified version of the corrected code is shown below.

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

Style:

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

Answer 4

In order to update the appearance of logo_flex:hover, you must modify the background-color. A simplified version of the corrected code is shown below.

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

Style:

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

Is there a way to make my siblings' elements turn black when hovering over an element?

Answer №1

Answer №2

Similar questions

What is the best way to extract the href value or URL from a JavaScript function and then utilize it for redirection

Determine the full location information with the help of Google Maps SDK without the need

When starting a new project with Angular 7, the option to set up routing is automatically included without asking for confirmation

Tips for triggering a method upon the initial passing of props to a Vue.js component

To grab a specific CSS attribute from a stylesheet using JavaScript

Tips for querying orchestrate.io

Activate the drop-down menu in Angular 6 by hovering over it with your mouse

Is my JavaScript coding accurate?

Extracting data from the response object and injecting it into the request

Guidance on integrating a pig latin translation npm module into a React application

Generate a PDF file using a byte array and save it for download

`The styling of a Select component is getting lost upon page refresh.`

Creating packing features specifically designed for resolution within a reusable module

The method for connecting the width of a panel to the height of the viewport in Ext Js

Displayed unfamiliar Obj characters on Google Chrome

The javascript function "Scroll to the element" is not functioning properly on my website. Perhaps using JQuery will resolve the issue

Troubleshooting ECONNREFUSED in NextJS API: App successfully runs in both deploy and development mode, but encounters issues when next build is executed

The entry description function is not functioning properly when used with jGFeed

Challenges with Incorporating Stripe

Error in Gatby development: Process Undefined