让文本显示在悬停 CSS 上

Question

  <div class="acontainer">
<a href="http://www.teamanco.com/products/ashley">
    <img  class="thumb" src="{{ 'f1.jpeg' | asset_url }}"><br>
    <p id="wrapper" class="text">text</p>
</a>
<a href="http://www.teamanco.com/products/panthera">
    <img class="thumb" src="{{ 'f2.jpeg' | asset_url }}"><br>
</a>
<a href="http://www.teamanco.com/products/evie">
    <img class="thumb" src="{{ 'f3.jpeg' | asset_url }}">
</a>
<a href="http://www.teamanco.com/products/tempest">
    <img class="thumb" src="{{ 'f4.jpeg' | asset_url }}">
</a>
<a href="http://www.teamanco.com/products/triumvirate">
    <img class="thumb" src="{{ 'f5.jpg' | asset_url }}">
</a>

<style type="text/css">
.acontainer {
  position: relative;
  height: 158px;
  width: 960px;
  overflow: hidden;
    margin-left:145px;
    margin-right:auto;
    margin-top:40px;
}

.acontainer a {
  float: left;
  margin: 20px;
}
.thumb{
    width:140px;
    margin: auto;
}

a:hover .thumb {
  top: 200px;
  left: 20px;
  opacity: .5;
}
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
</style>

我尝试在 CSS 中设置样式可见性以使文本显示在悬停上，但发生的情况是文本始终存在，并且受到不透明度的影响。

我希望将鼠标悬停在图像上时出现"文本"。

Answer 1

你犯了一些错误...

1º - 您的 CSS 错误...

#wrapper:hover .text {
visibility:visible;
}

如果你想引用包含文本的"p"标签，你只需要使用 .text { visibility：visible }，因为 .text 不是 #wrapper 子...另一种解决方案是使用 #wrapper：Hover.text...。

2º - 您正在设置和包装器

本身，您需要在主链接上设置包装器...

在这里，我们更正了您的代码：

<div class="acontainer">
<a href="http://www.teamanco.com/products/ashley" id="wrapper">
    <img  class="thumb" src="{{ 'f1.jpeg' | asset_url }}"><br>
    <p class="text">123123</p>
</a>
<a href="http://www.teamanco.com/products/panthera">
    <img class="thumb" src="{{ 'f2.jpeg' | asset_url }}"><br>
</a>
<a href="http://www.teamanco.com/products/evie">
    <img class="thumb" src="{{ 'f3.jpeg' | asset_url }}">
</a>
<a href="http://www.teamanco.com/products/tempest">
    <img class="thumb" src="{{ 'f4.jpeg' | asset_url }}">
</a>
<a href="http://www.teamanco.com/products/triumvirate">
    <img class="thumb" src="{{ 'f5.jpg' | asset_url }}">
</a>
<style type="text/css">
.acontainer {
  position: relative;
  height: 158px;
  width: 960px;
  overflow: hidden;
    margin-left:145px;
    margin-right:auto;
    margin-top:40px;
}
.acontainer a {
  float: left;
  margin: 20px;
}
.thumb{
    width:140px;
    margin: auto;
}

a:hover .thumb {
  top: 200px;
  left: 20px;
  opacity: .5;
}
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
</style>

我建议你学习"CSS上的子/父母关系"......顺便说一句，祝你好运:D