Question

我有以下代码：

HTML CODE：

<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
    <tr>
        <td align=right><span id=spnMain></span>
        </td>
    </tr>
</table>

CSS代码：

#spnMain {
    background: url("theImages/searchButton.png") no-repeat;
    background-position: 0px 0px;
    width: 28px;
    display: block;
    height: 28px;
    cursor: pointer;
}
#spnMain span {
    background: url("theImages/searchButton.png");
    display: block;
    height: 50px;
    background-position: 0px -56px;
}

JS CODE：

$(document).ready(function () {

     $("#spnMain").wrapInner("<span></span>");
     $("#spnMain span").css({
         "opacity": 0
     });

     $("#spnMain").hover(function () {
         $(this).children("span").animate({
             "opacity": 1
         }, 400);

     }, function () {

         $(this).children("span").animate({
             "opacity": 0
         }, 400);

     });
 });

产生以下内容（当鼠标悬停时，顶部是onload和底部：

enter image description here

如何让绿色按钮在紫色按钮顶部淡入，以便隐藏它？

Answer 1

#spnMain {
    position: relative;
    /* ... same as before ... */
}
#spnMain span {
    position: absolute;
    top: 0;
    right: 0;
    /* ... same as before */
}

Answer 2

我知道你要求一个javascript解决方案但是你可以用css做同样的事情（如果你愿意的话）

方式1，精灵，但没有动画：http://jsfiddle.net/NicoO/WBjS5/

方式2，两张图片，css过渡（有点hacky）：http://jsfiddle.net/NicoO/WBjS5/6/

#spnMain
{
    display: block;
    height: 28px;
    width: 28px;
    background-image: url(**url to green button image**);
    background-position: 0% 0%;
    position: relative;
}

#spnMain:after
{
   position: absolute;
   width: inherit;
   height: inherit;
   top: 0;
   left: 0;
   content:"";
   transition-duration: 0.4s;
   visibility: hidden;
   opacity: 0;
   background-image: url(**url to red button image**);
}

#spnMain:hover:after
{
    visibility: visible;
    opacity: 1;
}

更新可见性属性有助于IE8支持 - 不会发生转换，但图像将在鼠标悬停时交换。什么应该是旧的“浏览器”的后备好。

Answer 3

你的回答是：

小提琴链接：http://jsfiddle.net/LNQq3/4/

CSS代码：

#spnMain {
    background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
    background-position: 0px -5px;
    width: 28px;
    display: block;
    height: 28px;
    cursor: pointer;
}
#spnMain:hover {
    background-position: -37px -5px;
}

Answer 4

您是否尝试在相对定位元素（http://css-tricks.com/absolute-positioning-inside-relative-positioning/）中使用绝对定位元素？

我已经组织了一个快速的jsfiddle来证明这一点：http://jsfiddle.net/9xENQ/

我只是抓住了一个快速的GO / STOP图像精灵，并没有花时间真正研究必要的背景位置以使其完美排列。只是想传达这个概念。

HTML：

<div class="button-container">
    Hi here is a bunch of text with a padding right to keep it from bleeding into the image. 
    <span id="spnMain"></span>
</div>

CSS：

.button-container {
    position: relative;
    padding-right: 160px;
    width: 158px;
    height: 163px;
    border: 1px solid black;
}

#spnMain {
    background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
    background-position: 0px 0px;
    width: 158px;
    display: block;
    height: 163px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -158px;
}
#spnMain span {
    background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
    display: block;
    width: 158px;
    height: 163px;
    background-position: -158px 0px;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -158px;
}

您的JavaScript（原样）：

$(document).ready(function() {

    $("#spnMain").wrapInner("<span></span>");
    $("#spnMain span").css({"opacity" : 0});



    $("#spnMain").hover(function(){

        $(this).children("span").animate({"opacity" : 1}, 400);

    }, function(){

        $(this).children("span").animate({"opacity" : 0}, 400);

    });


});

为什么图像不会在现有图像的顶部淡入

4 个答案: