我想要一个按钮,如果有人将鼠标悬停在该按钮上,它会更改内容。我已经讲过了。但是,我不知道如何获得想要的结果。我想让它动起来。当有人将鼠标悬停在按钮上时,新文本应从右向左飞入,并推出当前文本。进一步,我想在右侧(按钮内)有一个小sissers图标,当将鼠标悬停在sisser图标上时,它也会更改背景颜色。
这可能吗?如果可以,怎么办?我没有在StackOverflow或Codepen上找到与我想要的解决方案接近的解决方案。这是我到目前为止的内容:
.product-voucherButton span {
display: none;
}
.product-voucherButton:hover span {
display: block;
}
.product-voucherButton:before {
content: 'Voucher';
}
.product-voucherButton:hover:before {
content: '';
}
.btn-secondary {
background-color: #312C2B !important;
color: white !important;
border: none !important;
}
.btn {
width: 150px;
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: .9rem;
line-height: 1.6;
border-radius: .25rem;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
<a class="btn btn-secondary product-voucherButton"><span>this is my code</span></a>
答案 0 :(得分:1)
您可以使用::before
和::after
伪元素以及attr()
函数来完成此操作:
#btn {
width: 200px;
height: 30px;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
#btn::before,
#btn::after {
display: block;
transition: all .6s ease-in;
position: absolute;
line-height: 30px;
top: 0;
white-space: pre;
}
i.fa.fa-cut {
transition: all .6s ease-in;
width: 400px;
}
#btn::before {
content: attr(data-orig);
}
#btn::after {
content: attr(data-repl);
margin-left: 300px;
}
#btn:hover::before {
margin-left: -300px;
}
#btn:hover::after {
margin-left: 0px;
}
i.fa.fa-cut {
margin-left: 363px;
line-height: 30px;
}
#btn:hover i.fa.fa-cut {
margin-left: 163px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<button id="btn" data-repl="Replacement Text" data-orig="Original Text">
<i class="fa fa-cut"></i>
</button>
更新:
您可以使用::before
和::after
伪元素以及attr()
函数来完成此操作:
#btn {
width: 200px;
height: 30px;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
#btn > span,
#btn::before {
display: block;
transition: all .6s ease-in;
position: absolute;
line-height: 30px;
top: 0;
white-space: pre;
}
i.fa.fa-cut {
transition: all .6s ease-in;
}
#btn::before {
content: attr(data-orig);
}
#btn > span {
content: attr(data-repl);
margin-left: 400px;
}
#btn:hover::before {
margin-left: -300px;
}
#btn:hover > span {
margin-left: 0px;
}
i.fa.fa-cut {
line-height: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<button id="btn" data-orig="Original Text">
<span>Replacement Text <i class="fa fa-cut"></i></span>
</button>