兄弟级别的hover控制 hover显示兄弟标签元素

控制兄弟标签
源代码

  <div class="topbar-car">
      <a href="#">
          <img class="buy-car" src="./images/icon/购物车空.svg" alt="">
          购物车（0）
      </a>
      <div class="cart-menu">
          <p>购物车中还没有商品，赶紧选购吧！</p>
      </div>
  </div>

.topbar-car{
    float: right;
    width: 120px;
    text-align: center;
    margin-left: 15px;
    
}
.topbar-car a{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    background-color: rgb(66, 66, 66);
}
.topbar-car a img{
    vertical-align:middle;
    height: 20px;
    margin-right: 0.3em;
}
.cart-menu{
    position: relative;
    right: 196px;
    height: 100px;
    width: 316px;
    line-height: 96px;
    text-align: center;
    display: none;  
}

当鼠标达到a标签的时候，div的cart-menu标签进行显示
加代码

.topbar-car a:hover+.cart-menu{
    display: block;
}

同理用focus控制统计不相邻标签的显示：
把加号换成波浪号

.search-text:focus~.keyword-list{
    display: block;
}