Question

当我将鼠标悬停在另一个类上时，我正在尝试将一个类的灰度值从100更改为0。以下是我的代码

 <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>

类points_profilepic的

dafault灰度值是filter: grayscale(100%);。当我将鼠标悬停在课程filter: grayscale(0%);上时，我想使其成为points_picture_file。我尝试了几种方法，但是没有用。

我的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;

}

我尝试过

.points_picture_file:hover ~.points_profilepic{

  filter: grayscale(0);

}

.points_picture_file:hover +.points_profilepic{

  filter: grayscale(0);

}

但是上述方法无效。

Answer 1

更改您的HTML顺序，您的元素为position:absolute;，对您的设计部分没有影响

<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);

}

Answer 2

在不更改HTML顺序的情况下，您必须使用JS定位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

2 个答案: