Question

当您将鼠标悬停在图像上方时，我会在图像顶部显示文字。最初，我还让整个图像在悬停时变得不透明。

现在我已经决定只想在悬停时使图像的一部分变得不透明，这部分带有文字。我尝试了教程here。不幸的是，一旦我进行了这些更改，当我将鼠标悬停在图像上时不会出现任何内容 - 不是文本或任何不透明的过滤器。

这是我的html文件：

  <div class="container">
    <div class="main">
    <div class = "JFK">
        <h6>JFK</h6>
        <div class = "transbox">
           <p> <a href = "#">to</a>
           <a href = "#">from</a></p>
        </div>
    </div>
/* continues on*/

这是我的css：

JFK {
    position: relative;
    left: 110px;
    height: 300px;
    width: 300px;
    bottom: 40px;
    background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
    line-height: 200px;
    text-align: center;
    font-variant: small-caps;
    display: block;
}

.transbox{
    margin: 30px;
    background-color: $ffffff;
    border: 1px solid black;
    opacity: 0.6;     
    display: none;
}
.JFK h6{
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;

}
.transbox p{
    position: relative;
    top: -90px;
    word-spacing: 100px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
    color: #c4d8e2;
    display: none;
}
.JFK p a{
    color: #c4d8e2;
    top: -30px;
}
.JFK:hover transbox p {
    display: block;
}

.JFK:hover{
    display: block;
}

.JFK: hover transbox{
    display: block;
    opacity:0.6;
}

我认为通过添加transbox div，我添加了一个包装类，如建议的here。我也尝试了背景颜色：rgba（255,0,0,0.5）;技巧提到here。没有运气 - 悬停时仍然没有任何反应。有什么建议吗？

Answer 1

您的代码不完整。在＆＃34;教程＆＃34;你说你试过，<div class = "transbox">只是一个透明背景的盒子，位于另一个盒子上面，带有背景图像。你说你需要＆＃34;只有一部分图像在悬停时变得不透明＆＃34;。

此外，您的CSS无效。＆＃34; JFK＆＃34;是一个类，在第一行，所以是＃34; .JFK＆＃34;。

然后，是

.transbox {
    margin: 30px;
    background-color: #ffffff;
}

你又写错了。

您可以使用：

.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;

}

Answer 2

你的问题在于你的css中的这两段代码：

.JFK:hover transbox p {
    display: block;
}

.JFK: hover transbox{
    display: block;
    opacity:0.6;
}

首先.课程中缺少transbox - 应该是.transbox

其次，.JFK:和hover之间有一个空格可以删除空格，它应该全部有效。

.JFK:hover .transbox p {
    display: block;
}

.JFK:hover .transbox{
    display: block;
    opacity:0.6;
}

在悬停时，使用文本在图像上方显示不透明div

2 个答案: