Multi-line image hover and border compatibility with IE7 +

Multi-line image hover and border compatibility with IE7 +

Problem:

When an image is arranged in multiple rows and multiple columns, the hover adds a border to squeeze the following image elsewhere.

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

Note: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + logs/y809K7uPYxcHi1xLHfv/I8L3A + cjxwpjxpbwcgc3jjjpq = "" alt = "\">

Solution: Set border: none for the image.

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

Hover border adding solution:

Originally:

1. Set transparent borders for elements (recommended ):

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

2. Enclose a div inside the element.

After modification:

Style:

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

========================================================== ====================================
In addition:

Outline IE 7 and 8 are not supported.

However, it is displayed on the element without adding a border to the element. If IE compatibility is not considered, you can directly use outline instead of border.

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