在悬停按钮时移动移动div [英] Move a Moving div, when hovering a button

问题描述

如何在悬停按钮时移动另一个'Moving'div？

代码：

HTML

 < table cellpadding =0cellspacing =0border =0width ='650'height ='320'style =border：1px solid＃ 000; position：absolute; top：300px;> 
< tr> 
< th> 
< div class =Flystyle =position：absolute; left：300px; top：-300px;> 
< div id =超人>< / div> 
< / div> 
< div class =buttonstyle =position：absolute; left：80px; top：60px;> 
< a href =https://stackoverflow.com/questions/25909457/moving-div-moving-whole-page>< / a> 
 
< / div> 
< / th> 
< / tr> 
< / table> 
  

CSS

  #Superman {
 background：url（http://www.comixoasis.com/v/vspfiles/templates/runner/images/homepage/Superman.png）no-重复; 
 width：250px; 
 height：300px; 
背景大小：90％; 
过渡：3秒缓解; 
} 
 #Superman：hover {
 background：url（http://www.mc-villalobos.com/sources/superman.png）no-repeat; 
 background-size：100％; 
 transform：translate（0，350px）; 
 / *下移* / 
} 
 .button {
背景：url（http://iconbug.com/data/26/256/a2ccff2488d35d8ebc6189ea693cb4a0.png）否-重复; 
 width：300px; 
 height：300px; 
} 
 .button：hover {
 background：url（http://1.bp.blogspot.com/__JNFVYfijS4/SX9bD7dk07I/AAAAAAAAAXw/VJCkHGqZFx4/s400/Happy.png）no-重复; 
 width：300px; 
 height：300px; 
} 
  

JS

  $（document）.ready（function（）{
 
 function moveDown（）{
 $（'。Fly' ）.animate（{
'marginTop'：+ = 100px
}，1000，moveUp）
} 
 
 function moveUp（）{
 $（'。Fly'）。animate（{
'marginTop'： -  = 100px
}，1000，moveDown）
} 
 moveUp（）; 
}）; 
  

DEMO

解决方案

您的 a 元素为empty：

 < div class =buttonstyle =position：absolute; left：80px; top：60px; > 
< a href =https://stackoverflow.com/questions/25909457/moving-div-moving-whole-page> 
< / a> 
< / div> 
  

将 div 移入其中，应该工作：

 < a href =https://stackoverflow.com/questions/25909457/moving-div-moving -whole页> 
< div class =buttonstyle =position：absolute; left：80px; top：60px;> 
< / div> 
< / a> 
  

A (link) button fix in table cell (But link not working when clicked.)

How to move another 'Moving' div, when hovering the button?

Code:

HTML

<table cellpadding="0" cellspacing="0" border="0" width='650' height='320' style="border: 1px solid #000; position: absolute; top: 300px;">
    <tr>
        <th>
            <div class="Fly" style="position: absolute; left: 300px; top: -300px;">
                <div id="Superman"></div>
            </div>
            <div class="button" style="position: absolute; left: 80px; top: 60px;">
<a href="https://stackoverflow.com/questions/25909457/moving-div-moving-whole-page"></a>

            </div>
        </th>
    </tr>
</table>

CSS

#Superman {
    background: url(http://www.comixoasis.com/v/vspfiles/templates/runner/images/homepage/Superman.png) no-repeat;
    width:250px;
    height:300px;
    background-size: 90%;
    transition: 3s ease;
}
#Superman:hover {
    background: url(http://www.mc-villalobos.com/sources/superman.png) no-repeat;
    background-size: 100%;
    transform: translate(0, 350px);
    /*move-down*/
}
.button {
    background: url(http://iconbug.com/data/26/256/a2ccff2488d35d8ebc6189ea693cb4a0.png) no-repeat;
    width:300px;
    height:300px;
}
.button:hover {
    background: url(http://1.bp.blogspot.com/__JNFVYfijS4/SX9bD7dk07I/AAAAAAAAAXw/VJCkHGqZFx4/s400/Happy.png) no-repeat;
    width:300px;
    height:300px;
}

JS

    $(document).ready(function () {

    function moveDown() {
        $('.Fly').animate({
            'marginTop': "+=100px"
        }, 1000, moveUp)
    }

    function moveUp() {
        $('.Fly').animate({
            'marginTop': "-=100px"
        }, 1000, moveDown)
    }
    moveUp();
});

DEMO

解决方案

Your a element is empty:

<div class="button" style="position: absolute; left: 80px; top: 60px;">
  <a href="https://stackoverflow.com/questions/25909457/moving-div-moving-whole-page">
  </a>
</div>

Move the div inside it, and it should work:

<a href="https://stackoverflow.com/questions/25909457/moving-div-moving-whole-page">
  <div class="button" style="position: absolute; left: 80px; top: 60px;">
  </div>   
</a>

这篇关于在悬停按钮时移动移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！