CSS change on hover

Question

I'm trying to change my grayscale value from 100 to 0 of a class when i hover on another class. Following is my code

 <div className="width_100">

          <img src={selfie} className="points_profilepic"
               title="Upload your profile picture"/>

          <input type="file" onChange={this.onImageChange.bind(this)}
                 className="points_picture_file" accept="image/*"/>


 </div>

dafault greyscale value of class points_profilepic is filter: grayscale(100%);. I want to make it filter: grayscale(0%); when i hover on class points_picture_file. I have tried several ways but did not work.

my css

.points_profilepic{

  height: 110px;
  margin-top: 10px;
  border-radius: 4px;
  transition: all 0.5s ease;
  filter: grayscale(100%);

}

.points_picture_file{

  height:110px;
  width:120px;
  position: absolute;
  margin-left: -120px;
  margin-top: 10px;
  opacity: 0;
  cursor: pointer !important;

}

I tried

.points_picture_file:hover ~.points_profilepic{

  filter: grayscale(0);

}

.points_picture_file:hover +.points_profilepic{

  filter: grayscale(0);

}

But above methods did not work.

score 1 · Accepted Answer · answered Jan 09 '19 at 09:38

Changes your HTML Order, Your element is position:absolute; no effect your design part

<div className="width_100">
 <input type="file" onChange={this.onImageChange.bind(this)}
                 className="points_picture_file" accept="image/*"/>

          <img src={selfie} className="points_profilepic"
               title="Upload your profile picture"/>
 </div>

CSS

.points_picture_file:hover +.points_profilepic{

  filter: grayscale(0);

}

score 1 · Answer 2 · answered Jan 09 '19 at 09:47

Without change the order of HTML you must use JS to target previous-sibling:

function func() {
document.getElementById("points_profilepic").style.filter="grayscale(0)";
}
function func2() {
document.getElementById("points_profilepic").style.filter="grayscale(100%)";
}

.points_profilepic{

  height: 110px;
  margin-top: 10px;
  border-radius: 4px;
  transition: all 0.5s ease;
  filter: grayscale(100%);

}

.points_picture_file{

  height:110px;
  width:120px;
  position: absolute;
  margin-left: -120px;
  margin-top: 10px;
  cursor: pointer !important;

}
.points_picture_file:hover ~ .points_profilepic{

  filter: grayscale(0);

}

 <div className="width_100">

          <img src="https://image.flaticon.com/icons/svg/579/579268.svg" class="points_profilepic"
               title="Upload your profile picture" id="points_profilepic"/>

          <input type="file" onChange={this.onImageChange.bind(this)}
                 class="points_picture_file" accept="image/*" onmouseover="func()" onmouseleave="func2()"/>


 </div>

CSS change on hover

2 Answers2