CODEWITHSUNDEEP
javascripthtmljquerycssreactjs
newbie
newbie

Reputation: 600

Change image on row hover in Reactjs

I am working on a reacts app and the requirement is to change the image on row hover.

There are multiple rows where each row has two columns (name and image). The requirement is to show helmet image only when the row is hovered and when it is not hovered, it should show the camera image.

I am able to change the image when the image column is hovered but how to change the image when the row is hovered?

<div class="container">
  <div> Name </div>
  <div> 
    <img src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px"/> 
    <img src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px"/>
</div>
</div>


.container{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
  border: 2px solid black;
}
.container:hover {
  background-color: yellow;
}

Upvotes: 0

Views: 937

Answers (2)

Romi Halasz
Romi Halasz

Reputation: 2009

If you want to update the src property of the image element when hovering over its parent .container, you will have to use JavaScript. You can use jQuery to achieve your goal:

$('.container').hover(
    () => { // on mouse over
        $(this).find('img').attr('src', '[your new image url]')
    },
    () => { // on mouse out
        $(this).find('img').attr('src', '[your old image url]')
    }
);

Have a look at this fiddle to get a better idea of what is happening: https://jsfiddle.net/g9p834fb/

Edit: this was submitted before you've updated your question.

To simply alternate the images in your row, you only need to update your CSS. See this fiddle for the changes required: https://jsfiddle.net/g9p834fb/1/

The gist is that you can define styles for the images based on the container's state (i.e. hovered, not hovered)

Here's what the updated html looks like:

    <img src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px" class="default-image"/> 
    <img src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px" class="hover-image"/>

As you can see, we use two classes to differentiate between the two states.

You then only need to add these two styles:

.container .default-image,
.container:hover .hover-image{
  display: block;
}

.container .hover-image,
.container:hover .default-image{
  display: none;
}

That should achieve your desired effect.

Upvotes: 1

Nico Shultz
Nico Shultz

Reputation: 1872

There is no need for any js to achive this just a simple css hover like this:

.container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
  border: 2px solid black;
}

.show-on-hover {
  display: none;
}

.container:hover {
  background-color: yellow;
}

.container:hover .show-on-hover {
  display: block;
}

.container:hover .hide-on-hover {
  display: none;
}
<div class="container">
  <div> Name </div>
  <div>
    <img class="hide-on-hover" src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px" />
    <img class="show-on-hover" src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px" />
  </div>
</div>

Upvotes: 0

Related Questions