Question

在最右上角，当我们将鼠标悬停在徽标上时，会显示Home文字。

这怎么可能？我检查了css但没找到。

感谢您的帮助。

Answer 1

在网站上，它是通过javascript实现的，但这不是必需的。

这是一个简单的过渡：

正常风格是

top:0;

和悬停样式

top:-51px;

结合

transition: all 1s/*the time*/;

和这样的图像：

+-------+
| Gidsy |
|       |
|  Home |
+-------+

注意：转换在Internet Explorer版本9及更低版本中不起作用。改进和简化的Javascript（jQuery）将是：

$(".blue-arrow a").hover(
     /* mouse-in */
     function(){
         $(".logo").stop().animate({top:-51},200);
     },
     /* mouse-out */
     function(){
         $(".logo").stop().animate({top:0},200);
     }
);

要使两个版本都正常工作，您需要一个包装元素，它的图像高度只有您问题的一半overflow:hidden，因此它只能同时显示其中一个图像。

Here is an Example 同时使用JS和CSS版本。

Answer 2

可以很容易地使用纯CSS完成：

<div class="logo"><a href="#">Text 1<br />Text 2</a></div>

.logo {
    font-family: Arial;
    color: #000;
    font-size: 25px;
    font-weight: bold;
    height: 25px;
    overflow: hidden;
}
a {
   height: 25px; 
   color: #000;
   display: inline-block;
   -o-transition: margin 0.3s;
   -moz-transition: margin 0.3s;
   -webkit-transition: margin 0.3s;
}
.logo:hover a {
   margin-top: -30px;
}

现场演示：Tinkerbin

Answer 3

这是执行此操作的脚本：

function home_button(){
    $(".blue-arrow a")
        .mouseenter(function(){
            if($("body").hasClass("homepage")!==true){
                $(".logo").stop().animate({top:-51},200);
            }
        })
        .mouseleave(function(){
            $(".logo").stop().animate({top:0},200);
        })
        .mousedown(function(){
                $(".header-bar .light-area").css("backgroundColor","#005995");
        })
}

它出现在https://d3pvklq8xnxxh2.cloudfront.net/cache/js/base.0b56986.js文件

中

这个动画是怎么做的？

3 个答案: