将边框从 1px 增加到 2px 时，如何防止 li 的高度发生变化？

Question

Every time when the mouse is over the box, its border needs to increase from 1px to 2px . But it would make all the content below the li:hover moving one pixel downwards.

How do I prevent this? Is there a pure CSS solution?

Thanks,

 $('li').on('mouseover', function(){$(this).addClass('li-hover')}); $('li').on('mouseout', function(){$(this).removeClass('li-hover')});

 li {border:1px solid black; margin-bottom:9px}.li-hover {border:2px solid black}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>bar1</li> <li>bar2</li> <li>bar3<br>break line</li> <li>bar4</li> <li>bar5</li> </ul>

Answer 1

You can solve this using outline instead of border , as outline does not affect the height of the element (whereas border is resizing the box).

In addition, I'd suggest using the :hover in css rather than explicitly setting a class on hover , so instead of .li-hover , use li:hover :

 li {outline:1px solid black; margin-bottom:9px} li:hover {outline:2px solid black}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>bar1</li> <li>bar2</li> <li>bar3<br>break line</li> <li>bar4</li> <li>bar5</li> </ul>

Answer 2

I would wrap the initial text and put a border on that - that way you can start with a transparent border on the li:

 $('li').on('mouseover', function() { $(this).addClass('li-hover') }); $('li').on('mouseout', function() { $(this).removeClass('li-hover') });

 li { border: 1px solid transparent; margin-bottom: 9px } li > span { display:block; border: 1px solid black; }.li-hover { border-color: black }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><span>bar1</span></li> <li><span>bar2</span></li> <li><span>bar3<br>break line</span></li> <li><span>bar4</span></li> <li><span>bar5</span></li> </ul>

If you can't add an extra span, you could use a box-shadow (which also works with border radius):

 li { box-shadow: 0 0 0 1px black; margin-bottom: 9px; border-radius:5px; } li:hover { box-shadow: 0 0 0 2px black; }

 <ul> <li>bar1</li> <li>bar2</li> <li>bar3<br>break line</li> <li>bar4</li> <li>bar5</li> </ul>

Answer 3

If you don't want to use outline then try this:

.li-hover {border:2px solid black; margin-bottom: 7px;}

 $('li').on('mouseover', function(){$(this).addClass('li-hover')}); $('li').on('mouseout', function(){$(this).removeClass('li-hover')});

 li {border:1px solid black; margin-bottom:9px}.li-hover {border:2px solid black; margin-bottom: 7px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>bar1</li> <li>bar2</li> <li>bar3<br>break line</li> <li>bar4</li> <li>bar5</li> </ul>

Answer 4

 $('li').on('mouseover', function() { $(this).addClass('li-hover') }); $('li').on('mouseout', function() { $(this).removeClass('li-hover') });

 li { border: 1px solid black; margin-bottom: 9px } li:hover { border: 1px solid transparent; } span { display: block; border: 2px solid transparent; } span:hover { border: 2px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><span>bar1</span></li> <li><span>bar2</span></li> <li><span>bar3<br>break line</span></li> <li><span>bar4</span></li> <li><span>bar5</span></li> </ul>