CSS遇到些困难，下面的效果如何实现呢？

img


上面图片，鼠标放上去后，如何变为下面的图片状态呢

img

我的初始实现思路：

我把a：hover 的属性设置为 color: orange,
内容都变为oragne色，但是鼠标放上去 span的圆框背景不能一起随着字体变为orange色
这个背景效果要如何在鼠标悬停的时候同步实现呢

方便截代码片段来看看嘛？

不能实现的效果的可能原因及解决办法
第一，如果你的文字跟图标不在同一个容器里面，你的hover又只对于文字的容器a标签，图标就没办法改变颜色，解决办法：将文字容器跟图标容器放在同一个父容器里面，然后hover对于父容器，样式也对于父容器（子容器继承父容器的颜色）
第二，你的图标是否支持改变颜色？不支持的话，换成支持改变颜色的图标


<!DOCTYPE html>
<html>
  <head>
    <meta childarset="utf-8" />
    <title></title>
  </head>
  <style>
    #box {
      width: 200px;
      height: 50px;
      color: #424242;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
    #box .cl {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #B0B0B0;
    }
    #box:hover {
      width: 200px;
      height: 50px;
      color: #FF6700;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
    #box:hover .cl {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #FF6700;
    }
  </style>
  <body>
    <div id="box">
      <div style="margin-right: 15px">查看更多</div>
      <div class="cl"></div>
    </div>
  </body>
  <script></script>
</html>

给需要变化的元素设置同一个class

也可以用JS，鼠标移入 获取包裹内容盒子的元素，给他的子元素分别设置样式