时间戳

首页 > 解决方案 > scss或css，当它是焦点时如何旋转箭头图像

css - scss或css，当它是焦点时如何旋转箭头图像

问题描述

我试图在焦点集中但不起作用时旋转箭头图像。

我只想旋转箭头图像。当我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>
  );
};

粗鲁的

@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;
  }
}

我错过了什么吗？以及如何仅旋转箭头图像？

标签： cssreactjssass

解决方案

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

所以应该是：

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

推荐阅读