Question

这是我正在尝试设置的“介绍页面”： https://i.imgur.com/c1TgQDf.jpg

而我正在思考而不是拥有那三排文字我可以做到这一点，以便当有人徘徊这三面旗帜中的一面时，一条线就会消失，这取决于语言（当鼠标悬停在英国上空时）旗帜，英文线出现，当悬停在德国国旗上时，德国文字显示出来。）

这是我到目前为止所尝试的（英语部分，其他部分是相同的）：

.en {
        text-align: center-top;
        line-height: 0px; 
        color: transparent; 
        font-size: 30px; 
        -webkit-transition: all 0.5s ease; 
        -moz-transition: all 0.5s ease; 
        -o-transition: all 0.5s ease; } 

.en:hover { 
        line-height: 133px; 
        color: #e0e0e0; 
} 

.en img {
        padding-right:20px;
}

我从这里借用了CSS：designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste，这是第三个例子，这里是它的实际应用：designshack。净/ tutorialexamples / HoverEffects / Ex3.html

在那里文本在图像右侧的空白处向下淡入，而我希望它在三个标志上方向上淡入（在页面本身的水平居中）。

到目前为止，我无法弄清楚如何使文本在上面（我真的只是一个n00b），上面的代码只是在标志下的一些空白处滑动，没有显示文字......

这是html部分：pastebin.com/NzRDmfiT

我不想链接到页面本身，因为我还不想透露该网站。但是如果有必要的话，我可以将它上传到某个地方，这样你就可以在元素检查器中使用在线副本（或者在其他浏览器中调用它）。

Answer 1

您可以使用jQuery实现所需的行为：

$(function(){
    $("#flags a").stop().hover(function(){
        $( $(this).data("message") ).animate({
            opacity: 1,
            lineHeight: "+20px"
        }, 1000);
    },function(){
        $( $(this).stop().data("message") ).animate({
            opacity: 0,
            lineHeight: "-20px"
        }, 1000);
    });
});

使用以下HTML

<div id="content">

    <div id="logo">
        <img src="http://vengefulchip.tk/playground/logo.png" alt="Alternative text for the image">
    </div>

    <p id="de">Willkommen auf Stefans Gallery, klicken Sie auf, um die Deutsch Version der Website fortfahren.</p>
    <p id="ro">Bine ati venit la Stefan's Gallery, dati click pentru a continua pe varianta in romana a site-ului.</p>
    <p id="en">Welcome to Stefan's Gallery, click to proceed to the english version of the site.</p>

    <div id="flags">
        <a href="./de/" data-message="#de"><img src="http://vengefulchip.tk/playground/de.png" /></a>
        <a href="./ro/" data-message="#ro"><img src="http://vengefulchip.tk/playground/ro.png" /></a>
        <a href="./en/" data-message="#en"><img src="http://vengefulchip.tk/playground/en.png" /></a>
    </div>

</div>

以下CSS

body {
    background-image: url('http://vengefulchip.tk/playground/pattern.jpg');
    background-position: center center;
    background-attachment: fixed;
}

#content {
    position: relative;
    background: rgba(25, 25, 25, .5);
    border: 2px dashed rgba(45, 45, 45, .8);
    padding-top: 25px; 
    padding-bottom: 50px;
    margin-left: 10%;
    margin-right: 12%;
    margin-top: 2%;
    margin-bottom: 2%;  
}

#logo {
    text-align: center;
    margin-bottom: 40px;
}

#de, #ro, #en {
    position: relative;
    font-size: 25px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300;
    color: #e0e0e0;
    line-height: 0;
    text-align: center;
    opacity: 0;
    width: 50%;
    height: 20px;
    margin: 10px auto;
}

#ro {
    top: -30px;
}

#en {
    top: -60px;
}

#flags {
    position: relative;
    margin: 10px auto;
    width: 365px;
}

将鼠标悬停在图像上时的文本动画

1 个答案: