悬停时的文本动画 [第 2 部分]答案

【问题标题】：Text animation when hovering [part 2]悬停时的文本动画 [第 2 部分]
【发布时间】：2015-03-13 10:57:18
【问题描述】：

之前曾向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/

提前致谢。

【问题讨论】：

“HelveticaNeue-Light”。看起来像是从文档中复制粘贴的印刷引号。考虑用" 或' 替换它们。
哎呀，真不敢相信这让我失望了。修好了。
在另一个线程中修复：stackoverflow.com/questions/28977694/…

标签： css

【解决方案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;
    }

对剩余的文本字段也一样。

【讨论】：

谢谢，但是当我将鼠标悬停在图像上时，这会阻止文本出现:) 编辑：没关系，现在才看到你的编辑，现在它不会隐藏文本：S

【解决方案2】：

我会尝试使文本成为标志的子项，然后将标志设置为相对位置（从它的外观来看也可能是内联块）并将子项设置为绝对位置，并且都在同一个顶部属性中。然后使用这种CSS：

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

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

由于标志只是图像，您可以将它们设置为背景图像，这样 div 就可以在 span 中为空。

【讨论】：