How to trigger two hover elements when hovering on one of them?

Question

I trying to build a form. I want the text area as well as the background of the icon to change upon hovering. But I am unable to make them change at the same time.

.Input{
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: center;
    align-items: center;
}

.Icon{
    border: 2px solid black;
    height: 32px;
    border-right: none;
    padding-left: 4px;
    width: 20px;
    border-radius: 5px 0px 0px 5px;
}

.Formelement{
    outline: none;
    border: 2px solid black;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    height: 30px;
    width:30%;
}

.Formelement:focus,
.Formelement:hover{
    border-color: green;
    /* border: 2px solid green; */
    background-color: beige;
}

.Icon:hover{
    border-color: green;
    background-color: beige;
}

Here is the code snippet:

import { FaUserCircle } from 'react-icons/fa';
import { MdErrorOutline } from 'react-icons/md';


import classes from './formElement.css';


const formElement = (props) => {
    let input = null;

    switch (props.elementType) {

        case 'input':
            input = <div className={classes.Input}>
                <FaUserCircle className={classes.Icon}/>
                <input className={classes.Formelement} type={props.elementConfig.type}
                    placeholder={props.elementConfig.placeholder}
                    onChange={props.changed} />
                <MdErrorOutline/>
            </div>



            break;

        default:
            input = null;
    }

I looked for some solutions and tried things like .Formelement:hover + .Icon:hover{ } but i did not work. Please guide me through this problem.

https://stackoverflow.com/a/46878231/1865844 You can do it by accessing DOM elements directly. Also with ref API in react, you can simulate a similar behaviour. — Mahesh, Feb 18 '22 at 10:51

jeremy-denis · Answer 1 · 2022-02-21T06:45:47.433

If the Icon is a child element of Formelement, you just need the hover property on Formelement

when you hover a child element it's also trigger the css hover of the parent

.Formelement{
    outline: none;
    border: 2px solid black;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    height: 30px;
    width:30%;
}

.Formelement:hover{
    border-color: green;
    /* border: 2px solid green; */
    background-color: beige;
}

.Icon:hover{
    border: solid green;
}

<div class="Formelement">
  <div class="Icon">icon</div>
</div>

If your Icon is outside the Formelement you will have to launch an event on formElement that say it's hover too

var icon = document.getElementById('icon');
var formElement = document.getElementById('formElement');

icon.addEventListener('mouseover', function() {
  var evt = new MouseEvent('mouseover', { 'bubbles': true });
  formElement.dispatchEvent(evt);
  formElement.classList.add('hover');
});

icon.addEventListener('mouseleave', function() {
  formElement.classList.remove('hover');
});

.Formelement{
    outline: none;
    border: 2px solid black;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    height: 30px;
    width:30%;
}

.Formelement:hover, .Formelement.hover {
    border-color: green;
    /* border: 2px solid green; */
    background-color: beige;
}

.Icon:hover{
    border: solid green;
}

<div id="formElement" class="Formelement">
  
</div>

<div id="icon" class="Icon">icon</div>

How to trigger two hover elements when hovering on one of them?

1 Answers1