仅使用css

Question

当我悬停链接时，我想更改div的背景。我怎样才能实现这一目标？目前我的代码看起来像这样，但它不起作用：

<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
     <a id="test" href="">
        <div id="test1" class="col-xs-2 button-left">
           <img class="button-img" src="{{ asset('/img') }}"></img>
        </div>
       <div class="col-xs-5 button-right">
          <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
       </div>
    </a>
</div>

#test:hover ~ #test1 {
    display: none;
}

#test:hover>#test1 {
  background: red;
}

<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
    <a id="test" href="">
      <div id="test1" class="col-xs-2 button-left">
        <img class="button-img" src="{{ asset('/img') }}"></img>
      </div>
      <div class="col-xs-5 button-right">
        <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
      </div>
    </a>
  </div>
</div>