Shulou(Shulou.com)06/03 Report--

The main content of this article is to explain "how to solve the problem of hover adding borders to squeeze pictures when arranging pictures in multiple lines." interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the problem of hover adding borders to squeeze pictures when arranging pictures on multiple lines.

Question:

When you encounter a picture arranged in multiple rows and columns, adding a border on hover will squeeze the following picture somewhere else.

=

Note:

IE11 the following browsers will add a 1px frame to the image by default

Solution: set border:none for the picture

=

Hover plus border solution:

Previously:

The code is as follows:

1. Set a transparent border for the element (recommended):

The code is as follows:

Li {

Border:2px solid transparent

}

Li:hover {

Border:2px solid red

}

two。 Wrap the element with a layer of div

After change:

The code is as follows:

Style:

The code is as follows:

Li {

Wdith:468px

}

Div {

Width:468px

Margin:2px

Padding:10px

Background-color:#fff

}

Div: hover {

Margin:0

Border:2px solid red

}

In addition:

Using outline IE 7, 8 is not supported.

But it is displayed on top of the element without a border on the element. If you don't consider IE compatibility, you can directly use outline instead of border.

At this point, I believe you have a deeper understanding of "how to solve the problem of hover adding borders to squeeze pictures when arranging pictures on multiple lines". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.