html - 悬停 css 上显示的三个 div

Question

我有 3 个 div，每个都应该有悬停功能以在背景图片上显示文本。

这行得通，有点...。发生的事情是当您将鼠标悬停在其中一个上时，所有三个显示文本。我怎样才能修复它，只显示悬停在上面的那个？

对于CSS

.circleBase {
  border-radius: 50%;
  width: 185px;
  height: 185px;
  border: 2px solid black;
  background-color: #fff;
  margin: 0 auto;
}

.c1 {
  margin: 0 auto;
  float: left;
  height: 185px;
  width: 185px;
  background: url(../images/pencil2.png) no-repeat center center;
  background-color: #fff;
  border: solid red 1px;
}

.c2 {
  margin: 0 auto;
  float: left;
  height: 185px;
  width: 185px;
  background: url(../images/up.png) no-repeat center center;
  background-color: #fff;
  border: solid red 1px;
}

.c3 {
  margin: 0 auto;
  float: left;
  height: 185px;
  width: 185px;
  background: url(../images/email.png) no-repeat center center;
  background-color: #fff;
  border: solid red 1px;
}

.hidden1 {
  font-size: 20px;
  color: black;
  display: none;
  margin-top: 75px;
}

.hidden2 {
  font-size: 20px;
  color: black;
  display: none;
}

.hidden3 {
  font-size: 20px;
  color: black;
  display: none;
}

.full:hover .hidden1{
  display: block;
}

.full:hover .hidden2{
  display: block;
}

.full:hover .hidden3{
  display: block;
}

对于我的html

        <div class="full">
        <div class="box"><div class="circleBase c1"><a href="design.html" class="hidden1">Web Design</a></div></div>
        <div class="box"><div class="circleBase c2"><a href="design.html" class="hidden2">SEO Services</a></div></div>
        <div class="box"><div class="circleBase c3"><a href="design.html" class="hidden3">Contact Us</a></div></div>
    </div>

感谢阅读!

吉姆

Answer 1

确保您正确限定了选择器中悬停的哪个 div，如下所示:

.box:hover a{display:inline; /*or any value except none */ }

您可能正在使用 .full 类，或者只是 div