如何在悬停时使用 css 移动父 Div 位置答案

【问题标题】：How to Move Parent Div Position using css on hover如何在悬停时使用 css 移动父 Div 位置
【发布时间】：2013-08-17 17:52:51
【问题描述】：

任何人对此都有解决方案我想通过鼠标悬停时的 css 移动 div 位置当我将鼠标悬停在 div 上时向下移动 div....

HTML

 <div class="movediv">I Want to Move this div on hover via css</div>
<div class="testing">
<a class="Linktohover">Test</a>
    <div class="showDiv">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

CSS

   .showDiv {
    position: absolute;
    left: -9999px;
    display: block !important;
    font-size: 14px !important;
}
.testing:hover .showDiv {
    left: 0px;
    display: block !important;
}
.testing {
    position: absolute;
    top: 0px;
}
.movediv {
    margin-top: 30px;
}

SEE DEMO

【问题讨论】：

如果你改变你的 HTML 不是我可以给你一个解决方案
当我将鼠标悬停在测试上时，我想移动 div ".movediv"
是的，就是这个意思，如果你愿意改变你的标记顺序，我可以给你一个解决方案
不，亲爱的 HTML 是固定结构，这就是为什么我发布了其他明智的，它很容易移动:)
所以你不能只用 CSS 来做到这一点

标签： html css

【解决方案1】：

喜欢这种类型

DEMO

.container 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto;
    width:50%; height:10%;
   }
.a {position:absolute; bottom:0; left:20px; width:30%;}
.b 
   {
    position:absolute; bottom:0; right:0; left:0;
    margin-right:auto; margin-left:auto; width:30%;
   }
.c {position:absolute; bottom:0; right:20px; width:30%;}

.b:hover ~ .a{
-moz-transform:translatex(-50px);
-ms-transform:translatex(-50px);
-o-transform:translatex(-50px);
-webkit-transform:translatex(-50px);
transform:translatex(-50px);
}

.b:hover ~ .c{
-moz-transform:translatex(50px);
-ms-transform:translatex(50px);
-o-transform:translatex(50px);
-webkit-transform:translatex(50px);
transform:translatex(50px);
}

【讨论】：

看到我想要这样确切地说，当我将鼠标悬停在图像上时，我想通过 css 移动父图像jsfiddle.net/dhaval17/EAJMt
嗨@Fags你的答案很接近我的问题但不准确因为当有父div并且我想通过悬停当前元素移动时我可以找到子div但无法通过css找到父移动位置或 xyz :)

【解决方案2】：

使用

.movediv:hover { margin-top:30px;}

而不是

.movediv{ margin-top:30px;}

【讨论】：

当我将鼠标悬停在测试上时，我想移动 div ".movediv"

【解决方案3】：

试试这个

.showDiv{ position:absolute; left:-9999px; display:block !important; font-size:14px !important;}
.testing:hover .showDiv{ left:0px; display:block !important;}
.testing{ position:absolute; top:0px;}
.movediv{transition: width 2s,
-webkit-transition: width 2s, -webkit-transform 2000s;}
.movediv:hover{margin-left: 35px;
    transform:rotate(0);
-webkit-transform:rotate(0); /* Safari */ }

这是给你的参考 http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition2 平滑过渡

【讨论】：

我不明白这与过渡有什么关系？您和Fags 都回答了无关紧要的问题..
我真的想通过css而不是css转换在鼠标悬停时移动父div的位置