Question

以前曾向here部分人员询问有关悬停在图片上时淡化某些文字的帮助，因为我无法弄清楚如何让文字漂浮在图像上方。

现在我已经把它弄清楚了，但我仍然对文本本身有疑问。

您可以看到页面的实时版本here。

它目前所做的是将每种语言的每个句子定位在不同的行中。我想要做的是在页面上的特定点（徽标下方和旗帜上方）显示所有行

似乎当我将鼠标悬停在句子所在的位置时，它们会淡入，而我希望只有当它悬停在旗帜上时才会发生。

#en { 
    height: 150px;
    line-height: 0px; 
    color: transparent; 
    font-size: 25px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
    text-align: center;
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 

#en:hover { 
    line-height: 150px; 
    line-height: 20px; 
    color: #e0e0e0;
} 

#en img{ 
    width: 118px;
    height: 78px;
    position: absolute;
    float: bottom;
    clear: bottom;
    bottom: 20px;
    left: 29.8%;
    }

这是jsfiddle上的代码，因为有人上次要求它： https://jsfiddle.net/f0gfqe6e/4/

提前致谢。

Answer 1

这里你只需将颜色悬停在文本

上即可

<div id="en" class="en">Welcome to Stefan's Gallery, click to proceed to the english version of the site.
                <span><a href="./en/"><img src="en.png" width="118" /></a></span>

CSS

 .en:hover { 
         color: transparent;
    }

也可以为剩余的文本字段提供相同的内容。

Answer 2

我会尝试将文本作为标志的子项，然后将标志设置为相对位置（也可能是从内部看起来是内联块），将子项设置为绝对值，并将所有内容设置为相同的顶级属性。然后使用这种CSS：

#en-flag > span {
   opacity:0;
   transition:1s;
}

#en-flag:hover > span {
   opacity:1;
}

由于标志只是图像，因此您可以将它们设为背景图像，以便div可以为空。

悬停时的文字动画[第2部分]

2 个答案: