我想创建这样的按钮,它的左侧有一个按钮名称和一个图标,当您将鼠标悬停在 Tech 上时,会出现一个额外的侧边按钮“+”,如下所示 当你完全悬停在上面时,会出现额外的两个按钮
有什么想法吗?提前致谢。要查看它的实时运行,这里是它的链接:https://www.producthunt.com/e/best-of-february-2017
最佳答案
我已经尽力创造了
这是代码
.btn {
display: inline-block;
border: 2px solid #BDBDBD;
padding: 8px;
border-radius: 4px;
position: relative;
white-space: nowrap;
background-color: #E0E0E0;
color: #212121;
text-transform: capitalize;
transition: all linear 0.2s;
}
.btn span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0px;
display: inline-block;
vertical-align: middle;
background-color: #9E9E9E;
border-left: 1px solid #BDBDBD;
width: 0px;
visibility: hidden;
}
.btn:hover {
padding-right: 30px;
background-color: #9E9E9E;
}
.btn:hover span {
width: auto;
visibility: visible;
padding: 8px;
background-color: #E0E0E0;
}
<span class="btn">
designer
<span>+</span>
</span>
希望这对您有帮助..
关于jquery - 创建像产品搜寻这样的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44732420/