jquery - 谁能告诉我这个悬停效果是什么？

Question

我正在查看此页面（http://montreal.ubisoft.com/en/ubisoft-our-news），并且我还注意到在其他页面上，当您将鼠标悬停在某些按钮上时，我访问过此悬停效果。我想知道这是如何完成的，css3 还是 JqueryUI？如果可能的话，有人可以将我链接到 tut 或插件（如果 Jquery）谢谢；）

Answer 1

HTML

<input type="button" id="myButton" value="welcome to stackoverflow"/>

CSS

#myButton
{
    background-color:blue;
}
#myButton:hover
{
    background-color:red;
}

选择你的颜色

确切的效果

HTML

 <div id="parentDiv">
        <a id="myButton" href="">Welcome to StackOverflow</a>
        <div id="transparentDiv"></div>
    </div>

CSS

#parentDiv
{
    position:relative;
    overflow:hidden;
}
#myButton
{
    display:block;
    height:70px;
    font-size:20px;
    text-decoration:none;
    text-align:center;
    color:white;
    background-color:red;
}
#transparentDiv
{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    background-color:black;
    opacity:0.7;
}

jQuery

$("#parentDiv").mouseenter(function(e){
    $("#transparentDiv").slideUp(500);
});
$("#parentDiv").mouseleave(function(e){
    $("#transparentDiv").slideDown(500);
});

看看：http: //jsfiddle.net/AliBassam/AzmUp/