向左移動CSS過渡寬度

我正在嘗試使用一個總是顯示跨度的div，並且當它懸停在div上時，它下面顯示一個段落。我有什麼作品，除了我想要一些div的過渡寬度，所以他們過渡，然後離開。默認（我猜測瀏覽器默認）似乎總是下來，然後是正確的。向左移動CSS過渡寬度

鏈接到下面的小提琴和代碼。有兩個帶有標題文本的紅框div，當你將鼠標懸停在它們上面時，寬度將展開，並顯示其下面的段落。我正在做的是讓右下div（標題Here2文本）過渡到左側。所以紅色背景根本不會過渡到正確的位置。

注意：div在頁面上的位置不能改變。

HTML

<div class="hpBox"> 
    <span>Title Here</span> 
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p> 
</div> 
<div class="hpBox hpBox2"> 
    <span>Title Here2</span> 
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.</p> 
</div>

CSS

.hpBox { 
    display: inline-block; 
    padding: 10px; 
    background: red; 
    -webkit-transition: 1s linear; 
    transition: 1s linear; 
    max-width:200px; 
    max-height:22px; 
    position:absolute; 
} 
.hpBox p { 
    max-height: 0; 
    max-width: 0; 
    overflow: hidden; 
    -webkit-transition: 2s linear; 
    transition: 2s linear; 
} 
.hpBox:hover { 
    max-width:400px; 
    max-height:200px; 
} 
.hpBox:hover p { 
    max-height: 200px; 
    max-width: 400px; 
} 
.hpBox2 { 
    left:60%; 
    top:250px; 
}

來源

2014-06-17 user1795832

嘗試以下操作：

.hpBox2 { 
    top:250px; 
    right: 20%; 
    text-align: right; 
}

來源

2014-06-17 17:42:59

完美。不需要文本對齊正確，但工作。 – user1795832

嘗試以下操作：

.hpBox2 { 
    top: 250px 
    right: 40%; 
    text-align: right; 
    }

當鼠標不再處於懸停模式時，添加此屬性使文本沒有溢出。

.hpBox { 
    /* ... */ 
    overflow:hidden; 
}

來源

2014-06-17 18:03:19 s0h3ck

一個做到這一點的方法是設置right和bottom屬性，而不是top和left性能。

.hpBox2 { 
    right: 35%; 
    bottom: -121px; 
}

更新jsfiddle

來源

2014-06-17 18:53:00 Barun

我這個苦苦掙扎，輾轉幾個搜索發現CodePen的解決方案。

這裏是鏈接：http://codepen.io/heisters/pen/gMgboJ

爲我工作。

HTML

<div> 
    <h1>Normal</h1> 
    <item>One</item> 
    <item>Two</item> 
    <item>Three</item> 
    <item>Four</item> 
</div> 
<div class="grow-left"> 
    <h1>Grow Left</h1> 
    <item>One</item> 
    <item>Two</item> 
    <item>Three</item> 
    <item>Four</item> 
</div>

CSS：

div { 
    display: block; 
    width: 200px; 
    margin: auto; 
    background-color: #EEE; 
} 
item { 
    display: block; 
    background-color: #FDD; 
    transition: all, 0.5s; 
    width: 200px; 
} 

item:hover { 
    width: 400px; 
} 

.grow-left { 
    direction: rtl; 
} 
.grow-left > * { 
    direction: ltr; 
}

HTH

戴夫

來源

2016-10-11 15:39:30 demsley

向左移動CSS過渡寬度

回答

相關問題