css - 鼠标悬停时增加边界

Question

当鼠标悬停在此 css 规则上时，如何让我的寄宿生增加尺寸。

.script_list > div:first-child,
.script_list > div.ui-sortable-helper {
  border-width: 1px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
 }

Answer 1

只需使用以下:hover后缀：

.script_list > div:first-child:hover,
.script_list > div.ui-sortable-helper:hover {
  border-width: 2px;
}

Answer 2

这是一个基本的工作示例。

:hover使用状态非常简单，基本的 CSS 。如果这不是所需的效果，请使用该box-sizing属性确保您的整体框大小（以及随后的布局）不会受到影响。

CSS

.frame {
    border: 1px solid black;
    height: 200px;
    width: 200px;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.frame:hover {
    border-width: 10px;
}

HTML

<div class="frame"></div>