마우스 오버시 이미지를 바꿀 수 없습니다.

질문

이것은 나에게 결코 일어나지 않았고, 호버링이 발생하는 이유를 알 수는 없지만 뒷면 이미지는 변경되지 않습니다.

<div class="settings" id="settings" style="background-image:url(assets/settings.svg);"></div>

.settings{
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw)/2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
}
.settings:hover{
  background-image: url("assets/settingsH.svg");
}

이미지가 있음을 증명하기 위해 assets / settingsH.svg 를 html 에 설정하면 마우스 오버 이미지가 표시됩니다.

호버링시 크기를 변경하면 작동 (호버링 발생)도 작동하지만 뒷면 이미지는 어떤 경우에도 변경되지 않습니다.

숨겨진 다른 설정 class가 없습니다 .

답변1

배경 이미지를 html로 인라인으로 배치했기 때문에 CSS를 통해 대체하려면! important를 넣어야합니다.

.settings:hover{
    background-image: url("assets/settingsH.svg")!important;
}

또는 더 나은, 배경을 CSS에 넣으십시오.

.settings {
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw) / 2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
  background-image: url("https://via.placeholder.com/400/0000FF");
}

.settings:hover {
  background-image: url("https://via.placeholder.com/400/FF0000");
}

<div class="settings" id="settings"></div>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/62684557/cant-replace-image-on-hover