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;
}

选择colors

精确效果

<强> 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/

有人能告诉我这个悬停效果是什么吗？

1 个答案: