在悬停 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