html - 悬停效果不起作用 : Div color is not changed when hovering over a <a> anchor tag

Question

我试图通过将鼠标悬停在 anchor 标记上来更改 div 颜色，但是当我这样做但什么也没有发生时，下面是我的代码和 jsfiddel 链接 https://jsfiddle.net/rhulkashyap/udvzanqz/ .

HTML 和 CSS

.hover-me{
  margin-bottom:50px;
  display:block;
}
.change{
  width:200px;
  height:200px;
  background:#00ACC1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size:20px;
  color:#fff;
}

.hover-me:hover .change{
  background:#00796B;
}

<a href="#" class="hover-me">Change Div color by hovering me</a>

<div class="change">Hello Universe</div>

Answer 1

您需要使用 sibling selector

.hover-me{
  margin-bottom:50px;
  display:block;
}
.change{
  width:200px;
  height:200px;
  background:#00ACC1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size:20px;
  color:#fff;
}

.hover-me:hover ~ .change{
  background:#00796B;
}

<a href="#" class="hover-me">Change Div color by hovering me</a>
<div class="change">Hello Universe</div>