我正在尝试使用带有搜索图标的圆形按钮,当它悬停时,圆形按钮应该缩放,而搜索图标应该保持不变。
这就是我想要的
对于 :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>
最佳答案
将鼠标悬停在父元素上时应该会发生变换效果。
因此,您可以将选择器更改为 .global-search-form button:hover
到 .global-search-form:hover button
。
.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);
}
关于html - 悬停时缩放圆形按钮没有缩放按钮图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22520672/