悬停效果不起作用:将鼠标悬停在<a>锚标记上时不会更改Div颜色

Question

我试图通过悬停在锚标签上来改变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>