0

I have a simple react component that I'm working on now, and CSS:hover that normally I alwas use in the stylesheet and that is always working, is just literally not working anywhere in this component. I am trying to understand what might be causing it. Would appreciate any help. This is the component.

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;
    }
Improve this question
2
  • 1
    Can you edit your question to add your index.CSS? Commented Jul 28, 2019 at 17:42
  • Everything seems fine to me: codesandbox.io/s/ancient-bush-hfby5 Commented Jul 28, 2019 at 18:03

1 Answer 1

Reset to default
0

You may be receiving an error because the id variable does not exist.

export function FontAwesomeIcon(props: Props): JSX.Element

export interface Props {
  icon: IconProp
  mask?: IconProp
  className?: string
  color?: string
  spin?: boolean
  pulse?: boolean
  border?: boolean
  fixedWidth?: boolean
  inverse?: boolean
  listItem?: boolean
  flip?: FlipProp
  size?: SizeProp
  pull?: PullProp
  rotation?: RotateProp
  transform?: string | Transform
  symbol?: FaSymbol
  style?: CSSProperties
  tabIndex?: number;
  title?: string;
}

parent can define it in div.

<div className="menuSearchOutputRight">
 <div id="menuSearchElementEdit">
  <FontAwesomeIcon  icon={faEdit}/>
 </div>
 <div id="menuSearchElementDelete">
  <FontAwesomeIcon  icon={faTrash}/>
 </div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I tried this, and unfortunately it didn't help. :hover doesn't work anywhere within this React component. Anywhere at all :)
Similarly, I tried it on my own project. Would you try to import the CSS file from the higher component? It worked smoothly in my project.
Are your CSS codes displayed on the chrome inspect screen?
Hey Fatih, thank you, good suggestion, I ended up reinspecting parent component, and I found out that the child component was not where I had been intending to put it! Issue solved!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.