Question

I'm trying to change the div color by hovering over an anchor tag but when I am but nothing is happening, here is my code below and jsfiddel link https://jsfiddle.net/rhulkashyap/udvzanqz/上时不会更改Div颜色。

HTML ＆amp;的 CSS

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要使用sibling selector

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

这是完美的，但你想要：

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

这里有jsFiddle演示：https://jsfiddle.net/udvzanqz/2/

Answer 3

只需按照以下方式更改您的CSS： -

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

它可能对你有帮助。

Answer 4

＆＃13;

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

＆＃13;

悬停效果不起作用：将鼠标悬停在<a> anchor tag

4 个答案: