hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题。

html 如下

 <div class="hot-recommend">
        <div class="wrapper">
            <div class="offer-list">
                <ul class='underline'>
                    <li class="offer-list-item  fd-clr">
                        <!-- <h3 class="title">今日热推</h3> -->
                        <div class="offer-feature">
                            <dl class="fea1">
                                <dt><a href="">外形小巧<i class="dot"></i></a></dt>
                                <dd><a href="">轻盈有触感，数字清晰</a></dd>
                            </dl>
                            <dl class="fea3">
                                <dt><a href="">超大屏幕<i class="dot"></i></a></dt>
                                <dd><a href="">不锈钢笔尖圆润耐磨书写360°顺滑流畅</a></dd>
                            </dl>
                        </