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

显示在悬停css的三个div

1 个答案: