多行排序照片时hover上去加边框挤照片的处理方式

日期:2021-03-07 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

难题:

遇到多行两列排序的照片时,hover上去加边框会把下面的照片挤到别处

============================================================

留意:

IE11下列访问器载入照片会默认设置给它加1个1px的边框

处理方式:对照片设定border:none

=============================================================

hover加边框处理计划方案:

本来:

拷贝编码
编码以下:

<li>
<img />
<h3></h3>
<p></p>
</li>

1. 对元素设定全透明边框(强烈推荐):

拷贝编码
编码以下:

li{
border:2px solid transparent;
}
li:hover{
border:2px solid red;
}

2. 对元素外再包裹1层div

变更后:

拷贝编码
编码以下:

<li>
<div>
<img />
<h3></h3>
<p></p>
</div>
</li>

款式:

拷贝编码
编码以下:

li{
wdith:468px;
}
div{
width:468px;
margin:2px;
padding:10px;
background-color:#fff;
}
div :hover{
margin:0;
border:2px solid red;
}

此外:

应用outline IE 7、8 不适用。

但它是显示信息在元素上面不容易对元素加边框。不考虑到IE适配的能够立即用outline替代border