如何通過使用JavaScript更改CSS值來​​移動/放置DIV容器？

Question

我得到了兩個div容器作為塊，它們具有固定的寬度，可能還有高度和display: block;

<div class="one"></div>
<div class="two"></div>

當您將鼠標懸停在容器.one我需要以某種方式將margin-top （或padding-top ）應用於容器.two以便當鼠標懸停在.one時將其移動幾個像素以下，而當您將鼠標指針放在一邊時， .two出現回到原來的位置。

Answer 1

.one:hover + .two
 {
   margin-top: 2px;
 }

第二個div后面必須是第一個div

.one:hover ~ .two
 {
   margin-top: 2px;
 }

如果一兩個元素之間存在其他元素，請嘗試此操作。

Answer 2

對於您的javascript（jQuery）解決方案：

$( ".one" ).hover(
  function() {
     $('.two').css('marginTop', '5px');
 }, function() {
     $('.two').css('marginTop', '0');
 });

為了使運動更平穩：

$( ".one" ).hover(
  function() {
     $('.two').animate({
         marginTop: "5px"
      }, 500 );
 }, function() {
     $('.two').animate({
         marginTop: "0"
      }, 500 );
 });

添加了一個演示