I have been working on a simple react component, and for some reason, the CSS hover effect that usually works perfectly in my stylesheets is not functioning within this specific component. I am struggling to identify the root cause of this issue. Any insights or assistance will be greatly appreciated. Here's the code snippet:
import React, { Component } from 'react';
import './index.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
class MenuSearchOutput extends Component {
render(){
return(
<div className="menuSearchOutputRoot">
<div className="menuSearchOutputVoidLeft"></div>
<div className="menuSearchOutputLeft">Burgers</div>
<div className="menuSearchOutputRight">
<FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit}/>
<FontAwesomeIcon id="menuSearchElementDelete" icon={faTrash}/>
</div>
</div>
)
}
}
export default MenuSearchOutput;
.menuSearchOutputRoot{
display:flex;
flex-direction:row;
align-items:center;
height:50px;
width:100%;
background-color:lightcyan;
border-bottom: solid cyan 1px;
}
.menuSearchOutputVoidLeft{
height:50px;
width:2%;
}
.menuSearchOutputLeft{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:32px;
width: 68%;
background-color:white;
color:black;
}
.menuSearchOutputRight{
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:center;
height:50px;
width:30%;
}
#menuSearchElementDelete:hover{
opacity:0.8;
cursor:pointer;
}
#menuSearchElementEdit:hover{
opacity:0.8;
cursor:pointer;
}