호버에서 이미지 미리보기 표시 (HTML 전용)

Question

CSS/JS로 여러 가지 방법이 있지만 HTML을 사용하여이를 수행 할 수있는 방법이 있습니까?

내가 원하는 이유는 복사가 훨씬 쉬워지기 때문입니다.

Answer 1

HTML로는 불가능합니다. 적어도 CSS 나 JavaScript가 필요합니다. 죄송합니다. CSS로 가까이 다가 갈 수 있습니다.

Answer 2

HTML만으로는 가능하지 않다고 생각합니다.

나는이 문제를 해결하려면 :

내가 복사하기가 훨씬 용이하게하기 때문입니다 원하는 이유.

우선적으로, 그렇지 않습니다.

CSS와 HTML을 분리하면 실제로 인스턴스를 복제 할 때마다 복사하는 횟수가 줄어 듭니다. 예를 들어

:

CSS :

img{display:none;} 
a:hover + img {display:block; width:100px; height:100px; background:black;} 

HTML :

img{display:none;} 
a:hover + img {display:block; width:100px; height:100px; background:black;} 

는

Demo

는 다른 이미지를 원한다면 지금 바로 복사 바로 옆에 HTML을 붙여 그것.

그러나 콘텐츠와 스타일을 구분할 때의 실질적인 이점은 한 번 편집하고 모든 것을 변경하는 것입니다.

내 웹 사이트에서 세 페이지에 걸쳐 50 개의 이미지가 있고 테두리를 추가하고 싶다면 수동으로 각 페이지에 들어가서 모든 단일 인스턴스를 변경해야합니다.

CSS를 사용하면 한 파일에서 한 줄을 바꿀 수 있으며 모두 업데이트됩니다.

그러나이 특정 문제에 대해서는 자바 스크립트 솔루션을 살펴볼 것입니다. 이미지 미리보기가 호출되지 않으면 이미지 미리보기가로드되지 않는 것이 이상적이며 CSS의 범위를 벗어납니다.