scss或css，如何旋转箭头图像，当它's的焦点

Question

当箭头图像聚焦但不起作用时，我试图旋转它。

我只想旋转箭头图像。当我把scss focus code放在其他类中时，它就起作用了。

react.js来制作按钮组件。

function LinkButton ({title, icon}, children) {
return (
<button className="btn">
{/* TODO: only when node has children, show the arrow image */}
<img className={`menu-arrow-img`} src={arrow} alt="" />
<img className="icon" src={icon} alt="" />
<div className="btn-title">
{title}
</div>
</button>
);
};

sass

@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
width: 180px;
height: 40px;
font-size: 14px;
color: #3b4757;
background-color: white;
border: 0;
border-radius: 0 100px 100px 0;
cursor: pointer;
.menu-arrow-img {
width: 16px;
height: 13px;
&:focus {
@include transform(rotate(90deg));
}
}
.icon {
width: 15px;
}
.btn-title {
width: 120px;
}
&:hover {
background-color: #ebeff8;
}
&:focus {
background-color: #ebeff8;
}
}

我错过了什么事吗？如何只旋转箭头图像？

Answer 1

当按钮聚焦时，您应该将转换添加到图标

所以应该是：

.btn:focus {
.menu-arrow-img {
@include transform(rotate(90deg));
}
}