0

I tried to change my svg image and text on hover and it doesn't work how I want it. I want the moment my mouse crosses over any of these 2 (svg or text) to change both. Maybe I made a mistake in the html structure or maybe in css. Please if you can help me, thanks in advance.

.logout-image {
  mask: url("../../../assets/images/log-out.svg");
  background-color: #62799D;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-left: 20px;
}

.logout-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 0px 8px 24px;
  width: 100%;
  height: 60px;
  position: static;
  left: 0px;
  top: 280px;
  color: #62799d;
  margin-top: 35vh;
}

.logout-container:hover {
  background: #0c2e6e;
  color: white;
}
.logout-image:hover{
  background: white;
}
<ul className="SidebarList">
        {sidebarData.map((value, key) => {
          return (
            <li
              className="row"
              key={key}
              onClick={() => {
                window.location.pathname = value.link;
              }}
            >
              {" "}
              <div className="icon">{value.icon}</div>{" "}
              <div className="title">{value.title}</div>
            </li>
          );
        })}
        
          {" "}
          
          {" "}
          //here is the problem
          <li className='logout-container'>
          <div  className="logout-image"></div>
          <div className="title" >Logo Out</div>
          </li>
          //until here
      </ul>

This is how I wanted to change with hover: target result

And this is how it is working right now: current result

The background changes only if I cross over my svg image: example here

Costa
  • 1,794
  • 1
  • 12
  • 21
viorel Grigoras
  • 19
  • 6
  • I don't think you can change the background of an SVG file like that. Maybe this will help you: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element – Vo Quoc Thang Jul 14 '21 at 03:03
  • Hey, in my prtscr I succeded to change the background of a SVG file , but I could not change along with a text into a container
    – viorel Grigoras Jul 14 '21 at 03:20

1 Answers1

1

Add this:

.logout-container:hover > .logout-image{
  background: white;
}

It turns the image and words white when logout-container is hovered.

Ugene
  • 113
  • 11
  • 1
    Hello!Thanks for your reply , I tried your solution and I have this result : https://prnt.sc/1ayukrr . Maybe you have another sugestion? IT WORKED if I make another hover and for logout-image:hover , THANKS A LOT . – viorel Grigoras Jul 14 '21 at 03:41
  • Oh yes you got to keep the original .logout-image:hover. Any ways glad it help! – Ugene Jul 14 '21 at 03:50