我仍然是javascript和CSS的初学者，我有一个书签心形图标，希望根据该图标是选中还是未选中来显示警报。
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});
@yellow: #FFAC33;
@gray: #CCC;
@red: #E86C6C;
button#favorite {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: @gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
}
@keyframes favorite {
.favorite;
}
@-webkit-keyframes favorite {
.favorite;
}
@keyframes favoriteHollow {
.favoriteHollow;
}
@-webkit-keyframes favoriteHollow {
.favoriteHollow;
}
button#heart {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: @gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
&.faved {
span {
-webkit-animation: heart 0.5s;
animation: heart 0.5s;
color: @red;
span {
z-index: 1000;
-webkit-animation: heartHollow 0.5s;
animation: heartHollow 0.5s;
}
}
}
}
.heart {
{
transform: scale(1);
}
{
transform: scale(1.2);
color: @red;
}
{
transform: scale(1.4);
color: @red;
}
{
transform: scale(1);
color: @red;
}
}
.heartHollow {
{
transform: scale(1);
opacity: 1;
}
{
transform: scale(1.4);
opacity: 0.5;
}
{
transform: scale(1.6);
opacity: 0.25;
}
{
transform: scale(2);
opacity: 0;
display: none;
}
}
@keyframes heart {
.heart;
}
@-webkit-keyframes heart {
.heart;
}
@keyframes heartHollow {
.heartHollow;
}
精慕HU
相关分类