Question

所以，我看到一些似乎与这个问题相关的事情，但它们与我能够使用他们的答案并不相似。

无论如何，基本上，我想在我的侧边栏中设置一个带有美元符号的按钮。当鼠标悬停在它上面时，我希望它能够平滑地滑出并在上面加上“Donate”这个词，并将$保持在按钮的右侧。然后，当鼠标不再悬停在它上面时，我希望它重新滑入。

示例：

鼠标未结束：

$

鼠标悬停：

e $

te $

（完全滑出）

捐赠 $

除了真正的按钮。 注意：如果它无法使用图像作为按钮，那很好。如果可以的话，这会很好，但说实话，从长远来看这无关紧要，因为我可以让HTML按钮看起来一样好。

这似乎是一个非常简单的问题，所以我真的不想问这个问题，但我根本想不出来。

修改

嗯，这是我尝试过的一件事。

头标记：

<script type="text/javascript">
$(document).ready(function()
    {
    $("#imgAnimate1").hover(
        function()
        {
            $(this).attr("src", "donateB.gif");
        },
        function()
        {
            $(this).attr("src", "donateA.png");
        });
</script>

图片的位置：

<div id="sidebar">
<img id="imgAnimate1" src="Images/donateA.png" alt="" >
</div>

结果（将鼠标悬停在其上方时）： http://prntscr.com/45js7q

Answer 1

这些资源将帮助您开始正确的方向。

CSS3 transition 1

CSS3 transition 2

Stack Overflow post about same kind of question + Answer

您甚至无需使用jquery即可实现此目的。只有CSS和CSS3标记

示例：

.myImage{
    width:200px;
    height:25px;
    background:#C96666;
    position:relative;
    display:inline-block;
    left:-180px;
    transition: 1s;
}

.myImage:hover{
    transition: 1s;
    left: 0;
}

如何制作一个滑出的按钮并在onmouseover上显示全文？

1 个答案: