CSS 전환: 배경 크기가 작동하지 않습니다.

Question

저는 이미지 위로 마우스를 가져가면 축소되어 div의 배경을 보기 위해 너무 많이 축소하지 않고도 전체 이미지를 볼 수 있는 웹사이트를 개발 중입니다.

내 HTML은 다음과 같습니다.

<div id="래퍼">
 <div id="imgDiv">
  <div id="transitionDiv" style="배경 이미지: url("../resources/models/HA-SJX.JPG");"></div>
 </div>
 <p id="title">MALEV Cessna c172 HA-SJX (G1000)</p>
 <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)>다운로드</a>
</div>

나만의 CSS:

:루트 {
  --img-크기: 350px;
  --버튼 여백: 20px;

  --진한 파란색: #070b21;
  --파란색: #10184a;
  --밝은 파란색: #00d1ff;
}

div#래퍼 {
  위치: 상대;
  여백: 자동;
  여백 하단: 100px;
  배경색: var(--dark-blue);
  너비: var(--img-size);
}

div#imgDiv {
  위치: 상대;
  텍스트 정렬: 중앙;
  색상: 빨간색;
  패딩: 0;
  여백: 0;
  배경색: var(--dark-blue);
  오버플로: 숨김;
  높이: var(--img-size);
}

div#imgDiv div#transitionDiv {
  배경 위치-x: 50%;
  높이: 100%;
  너비: 100%;
  배경 크기: auto var(--img-size);
  background-repeat: 반복하지 않음;

  -webkit-transition: 배경 크기 1500ms 용이성;
  -moz-transition: 배경 크기 1500 용이성;
  -o-transition: 배경 크기 1500 용이성;
  -ms-transition: 배경 크기 1500ms 용이성;
  전환: 배경 크기 1500ms 용이성;
}

div#imgDiv:호버 div#transitionDiv {
  배경 위치 Y: 50%;
  배경 크기: var(--img-size) auto;
}

p#제목 {
  오버플로: 숨김;
  높이: 38px;
  여백: 30px;
  디스플레이: -webkit-box;
  -웹킷-라인-클램프: 2;
  -webkit-box-orient: 수직;
}

div#designs div a {
  디스플레이: 블록;
  텍스트 정렬: 중앙;
  텍스트 장식: 없음;
  배경색: var(--light-blue);
  색상: 흰색;
  글꼴 크기: 40px;
  글꼴 모음: "Montserrat", sans-serif;
  여백: var(--button-margin);
  패딩: 0px;
  너비: calc(100% - 2 * var(--button-margin));
  테두리 반경: 15px;
  전환: 0.5초;
}

div#designs div a#no-link {
  배경색: 회색;
}

div#designs div a:hover {
  배경색: dodgerblue; /* 지금은 임의의 색상을 사용합니다 */
}

div#디자인 div a:활성 {
  배경색: 파란색; /* 지금은 임의의 색상을 사용합니다 */
}

저는 이 방법을 사용하지 않습니다.

我还尝试更改 div，使其在 div 内有一个图image标签，但这也不起작품용。

Answer 1

자동 및 기타 일부 속성(재정의, 포함, 상속, 초기, 설정 해제)에서는 전환이 작동하지 않는 것으로 나타났습니다. 내가 찾은 해결책은 다음 코드를 사용하여 JavaScript를 사용하는 것이었습니다.

으아악

먼저 이미지 위에 마우스를 올리지 않았을 때 이미지의 크기를 얼마나 조정해야 할지 파악하기 위해 비율을 계산합니다. div 中创建一个新属性 bgSize 并将其存储在那里，来存储要在 onmouseleave 이벤트에 사용되는 이 값을 전달해야 합니다.

그런 다음 onmouseenter 和 onmouseleave 이벤트를 사용하여 이미지 위로 마우스를 가져갈 때 이미지 크기를 변경합니다.

또한 CSS 파일에서 :hover 선택기가 더 이상 사용되지 않으므로 제거했습니다.