html - 使用CSS的小图片到大图片，可在移动设备上使用

我正在尝试使用CSS进行翻转操作，它在浏览器中看起来不错，但不能在移动设备上正常工作。任何人都对如何通过CSS做到这一点有任何想法，但是如果我需要JavaScript，我愿意考虑。我意识到，我在下面使用的CSS有点多，但是我已经建立了样式，但是必须忽略如何使用移动设备。

    .ienlarger {
    	float: left;
    	clear: none;
    	padding-bottom: 5px;
    	padding-right: 5px;
    }
    .ienlarger a {
    	display:block;
    	text-decoration: none;
    }
    .ienlarger a:hover{ position:relative;
    }
    .ienlarger span img {
    	border: 1px solid #FFFFFF;
    	margin-bottom: 8px;
    }
    .ienlarger a span {position: absolute;display:none;color: #FFCC00;text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 13px;font-weight: bold;padding:5px;border:3px solid #289fd9;box-shadow: 0px 0px 5px #2382b1;background-color:#fff;
    }
    .ienlarger img {border-width: 0;}
    .ienlarger a:hover span {
    	display:block;
    	top: 50px;
    	left: 90px;
    	z-index: 100;width:300px;
    }
    .resize_thumb {
    	width: 150px;
    	height : auto;
    }

<table>
             <tbody>
              <tr bgcolor="#289fd9">
                <td width="25%">The Image</td>
                <td width="75%"><strong>Verbiage</strong></td>
              </tr>
              <tr>
                <td style="background-color: rgb(255, 255, 255);vertical-align:middle;" class="ienlarger"><a href="#"><img src="http://fiftyshadesofkevin.com/images/small.jpg" width="50%" class="resize_thumb" /><span>
                  <img src="http://fiftyshadesofkevin.com/images/large.jpg" alt="large" /></span></a></td>
    			<td>Here is something that would describe the image</td>
              </tr>
            </tbody>
</table>

这是示例页面
http://fiftyshadesofkevin.com/hover.html

任何有想法和概念的人将不胜感激。

最佳答案

我能够执行以下操作使其工作：

.ienlarger {
    float: left;
    clear: none; /* set to left or right if needed */
    padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
    padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a {
    display:block;
    text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
    position:relative;
}

.ienlarger span img {
    border: 1px solid #FFFFFF; /* adds a border around the image */
    margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
    position: absolute;
    display:none;
    color: #FFCC00; /* caption text colour */
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px; /* caption text size */
    font-weight: bold;
    padding:5px;border:3px solid #289fd9;box-shadow: 0px 0px 5px #2382b1;background-color:#fff;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
    display:block;
    top: 50px; /* means the pop-up's top is 50px away from thumb's top */
    left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
    z-index: 100;width:300px;

/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */

/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
    width: 150px; /* enter desired thumb width here */
    height : auto;
}

关于html - 使用CSS的小图片到大图片，可在移动设备上使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39575007/