如何使3幅图像保持一致的响应和悬停效果

Question

我正在使用一个模板来制作一个网站，我不是很擅长css。然而，我有3个图像，我想保持在同一条线，有悬停效果和适合不同分辨率的屏幕。

我在网上找到了一些我想要的东西，但我从来没有把它们合二为一才能得到这个结果。

据我所知，悬停效应不适用于移动设备，所以我认为我应该使用2个css。一个用于移动，另一个用于计算机和平板电脑。比如，当分辨率<300时，没有悬停。否则就悬停。

如果我错了，请纠正我。图像没有其他格式，代码是<img src="">。

Answer 1

我认为您不会希望有不同的样式表，因为您应该能够在一个响应良好的单个CSS文件中这样做。

这应该能让你开始。显然，您希望在适当的站点上添加类，class='inline-image'或类似的内容。

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