Question

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

这就是我想要的

为父“div”in：课后我把“搜索glypicon”放在“按钮”的中间位置，并在“按钮”的悬停中使用css“transform”属性和“搜索glyphicon”进行缩放“不受影响，因为它在外面”按钮“。

我正面临的问题是“搜索glyphicon”是“按钮”的父“div”的一部分，它位于“按钮”的顶部，悬停将不能在“搜索glyphicon”上工作。< / p>

如果有其他选择让我知道，

这是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);
}

悬停时缩放圆形按钮，无需缩放按钮图标

1 个答案: