html - 悬停时缩放圆形按钮没有缩放按钮图标

Question

我正在尝试使用带有搜索图标的圆形按钮，当它悬停时，圆形按钮应该缩放，而搜索图标应该保持不变。

这就是我想要的

对于 :after class 中的父“div”，我将“search glypicon”放在“button”的中间，并在“button”悬停时使用 css“transform”属性和“search glyphicon”进行缩放"不受影响，因为它位于“按钮”之外。

我面临的问题是，“搜索字形”是“按钮”的父“div”的一部分，它位于“按钮”的顶部，悬停在“搜索字形”上方不起作用。

如果有任何其他选择，请告诉我，

这是 demo

HTML

<div class="global-search-form" role="search">
    <button aria-label="Search" class="btn btn-default" type="submit" data-toggle="modal" data-target="#global_search_widget">
        <div class="mask-search"></div>
    </button>
</div>

Answer 1

将鼠标悬停在父元素上时应该会发生变换效果。

因此，您可以将选择器更改为 .global-search-form button:hover

到 .global-search-form:hover button。

UPDATED EXAMPLE HERE

.global-search-form:hover button {
     border-color: #0064d2;
     background: #ffffff;
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -ms-transform: scale(1.1);
     -o-transform: scale(1.1);
     transform: scale(1.1);
}