如何避免悬停时抖动图像 [英] How to avoid shake of images on hover
本文介绍了如何避免悬停时抖动图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在div中水平创建了图像。当我在悬停时对图像应用边框时，图像是shakking。我必须做什么？给出建议
这里是我的代码
I have created images horizontally in div.when i apply border to images on hover,images are shakking.what i have to do?give suggestions
here is my code
<html>
<head>
<style type="text/css">
#abc{
float:left;
border: dotted;
}
#abc:hover
{
border:1px solid pink;
}
.a
{
padding-top: 100px;
padding-bottom: 50px;
}
.b
{
padding-top: 30px;
}
.c
{
padding-top: 50px;
}
.d
{
padding-top: 50px;
}tr {
width:auto;
display: inline;
}
td{
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<div class="a" vspace="20" >
<table><tr><td>
<img id="abc" hspace="35"height="150"width="150" src="image.jpg"/><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"/><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35"height="150"width="150"src="image.jpg"/><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"/><br/>text1</td></tr>
</table>
</div>
<div style="clear:both;"></div>
<div class="b" vspace="20" >
<table><tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
</table>
</div>
<div style="clear:both;"></div>
<div class="c" vspace="20">
<table><tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
</table>
</div>
<div style="clear:both;"></div>
<div class="d" vspace="20">
<table><tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
<tr><td>
<img id="abc" hspace="35" height="150"width="150" src="image.jpg"><br/>text1</td></tr>
</table>
</div>
</div>
</body>
</html>
推荐答案
你已经多次使用相同的id，所以删除它并使用类代替。
查看更新的代码：
You have used same id so many times so remove that and use class instead.
See the updated code:
.wrapper {
border: solid 1px transparent;
border-radius:4px;
height: 100px;
width: 100px;
padding: 15px;
}
.wrapper img {
border: dotted 1px #555;
height: 100%;
width: 100%;
}
.wrapper img:hover{
border-color:pink;
}
-KR
-KR
这篇关于如何避免悬停时抖动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
