Fatal编程技术网
  • html/
  • Html CSS转换定位

Html CSS转换定位

html css

Html CSS转换定位,html,css,Html,Css,我是网页设计新手。非常新。我需要一些关于-webkit转换的帮助。有没有一种方法可以让“巫婆历险记”框始终位于其他框的顶部。类似于将鼠标悬停在左侧框上时产生的效果 <body> <p>Test</p> <div class="container"> <div class="box"> <h2>headline</h2> <p>test content</p

我是网页设计新手。非常新。我需要一些关于-webkit转换的帮助。有没有一种方法可以让“巫婆历险记”框始终位于其他框的顶部。类似于将鼠标悬停在左侧框上时产生的效果

<body>
<p>Test</p>
<div class="container">
    <div class="box">
        <h2>headline</h2>
        <p>test content</p>
    </div>
    <div class="box">
        <h2>headline</h2>
        <p>test content</p>
    </div>
</div>
<p>Test</p>
给你-

.animate.move {
  top: 100%;
  margin-top: -100px; /*.animate width*/
}
请查看以获得更好的理解。

这有点问题，因为元素的位置在悬停时会移动，因此很难保持悬停。您选择的速度在这里很有用

坦率地说，悬停可能更适合用JS/JQ切换类，但实际的重新排序可以用flexbox完成

.集装箱{ 宽度：75%； 利润率：10px自动； 边框：1px纯绿色； 显示器：flex； 柔性包装：包装； } .盒子{ 顺序：2； 边界半径：25px； 显示：内联块； 宽度：15%； 身高：20%； 利润率：1%； 颜色：海蓝宝石； 文本对齐：居中； 背景：黑色； -webkit过渡：宽度2s； 过渡：宽度2s； } .box:悬停{ 顺序：1； 宽度：100%； 身高：40%； } 第一 测试内容

第二 测试内容

第三 测试内容

悬停事件是一种奇怪的行为，因为这意味着元素将替换它们在悬停上的位置，而不是请求的解决方案/建议。