当前位置:  开发笔记 > 前端 > 正文

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

如何解决《悬停效果不起作用:将鼠标悬停在<a>锚标记上时不会更改Div颜色》经验,为你挑选了1个好方法。

我试图通过悬停在锚标签上来改变div颜色但是当我没有发生任何事情时,这里是我的代码,jsfiddel链接https://jsfiddle.net/rhulkashyap/udvzanqz/.

HTMLCSS

.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;
}
Change Div color by hovering me

Hello Universe



1> Nenad Vracar..:

你需要使用 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;
}
Change Div color by hovering me
Hello Universe
推荐阅读
地之南_816
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有