How to solve the problem of hover adding borders to squeeze pictures when arranging pictures in multiple lines
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!
