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} as .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

将文本显示在悬停CSS上

1 个答案: