3 개 이미지를 같은 줄에 배치하고 호버 효과를 적용하는 방법

Question

템플릿을 사용하여 웹 사이트를 만들고 있는데 CSS가 좋지 않습니다. 그러나 나는 같은 선에 머무르고 싶고, 호버 효과를 가지며, 다른 해상도를 위해 화면을 맞추는 3 개의 이미지를 가지고있다.

내가 인터넷에서 원하는 비트를 찾았지만이 결과를 얻기 위해 함께 맞출 수 없었습니다.

호버링 효과가 휴대 기기에서 작동하지 않는다는 것을 알고 있으므로 2 css를 사용해야한다고 생각합니다. 하나는 모바일 용이고 다른 하나는 컴퓨터 및 태블릿 용입니다. 해상도가 <인데 300 호를 가져갈 때와 같은 것입니다. 그렇지 않으면 마우스를 올리십시오.

내가 잘못하면 저를 교정하십시오. 이미지에는 다른 형식이 없으며 코드는 <img src="">입니다.

Answer 1

다른 스타일 시트를 사용하고 싶지는 않을 것입니다. 응답 성이 뛰어난 단일 CSS 파일에서이 작업을 수행 할 수 있어야합니다.

시작해야합니다. 분명히 classes을 적절한 사이트 class='inline-image' 또는 비슷한 것으로 추가하고 싶을 것입니다.

HTML

<div> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' /> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' /> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg' /> 
</div> 

스타일 시트

div { 
    /* to keep all the images on the one line*/ 
    white-space: nowrap; 
} 

img { 
    background-color: #ffffff; 
    padding: 10px; 
} 

img:hover { 
    background-color: #000000; 
} 

JSFiddle :http://jsfiddle.net/CVSvh/