當光標懸停在圖像上時,我有一張40Px 40Px的圖片,圖像應該是100px 100px,但是打開緩慢的左上角至右下角或右上角左下角。當我將光標移動到圖像時,準確地返回到原來的位置40px 40px。 在此先感謝javascript懸停圖像並顯示左上角到右下角
回答
你也可以做到這一點,而不使用CSS3而不是JavaScript。
.image-placeholder {
width: 40px;
height: 40px;
background: red;
transition: height 2s, width 2s;
}
.image-placeholder:hover {
width: 100px;
height: 100px;
}
.images {
list-style: none;
padding: 0px;
}
.images li {
display: inline-block;
vertical-align: middle;
}
<div class="image-placeholder">
<!-- You could also use the class on image tags -->
</div>
<!-- second example -->
<ul class="images">
<li class="image-placeholder"></li>
<li class="image-placeholder"></li>
<li class="image-placeholder"></li>
</ul>
好的,我明白了,但是你怎樣才能使用javascript或jquery左下角左上角。當我舉例如下類:$(「。amazon」)。hover(function(){{「amazon a img」 ).toggleClass( 「amazon_hover」); CSS:.amazon_hover { 位置:絕對; 寬度:100像素; 高度:100像素; -moz過渡:高度2S,寬度2S; z索引:10; } – Marko 2015-02-10 14:48:02
@Marko我不明白你爲什麼要用JQuery來做這件事,我用'vertical-align:middle'添加了第二個例子,你可以使用CSS來添加你自己的變體 – Berendschot 2015-02-10 15:08:41
我知道無論是css還是css javascript jquery對我來說很重要,我們可以慢慢地打開圖像緩慢的頂部左邊t右下。在此先感謝 – Marko 2015-02-10 16:45:29
您可以使用CSS轉換:
img {
width: 40px;
height: 40px;
transition: all 2s;
}
img:hover {
width: 100px;
height: 100px;
}
而且ofcourse一個JSFiddle Demo
- 1. 鏡像從左下角到右上角對角線圖片
- 2. jquery:在右上角顯示圖像
- 3. 在div的左下角和右下角對齊兩個圖像
- 4. 懸停圖像顯示div右側
- 5. 設置地圖的左上角和右下角座標
- 6. 如何爲UIView的左下角,右下角和左上角設置cornerRadius?
- 7. 如何在左下角到右上角反射陣列?
- 8. Javascript。將鼠標懸停在右側顯示圖像的圖像上。
- 9. 左上角和右上角的按鈕
- 10. 背景圖片不顯示右下角
- 11. 如何在UIImageView中獲取圖像的右上角和左下角座標
- 12. 放置兩個圖像。一個右上角,另一個左下角
- 13. 如何在android的左上角和右下角左右對齊按鈕?
- 14. 將圖像變暗並在懸停上放置一個半角三角形
- 15. 顯示圖像從左到右php
- 16. 找到圖像的左上角位置
- 17. 定位圖像右上角的圖像
- 18. 如何指定視頻視圖的位置? (左上角,右上角,左下角等)
- 19. CSS定位 - 右下角左上角的元素
- 20. 對齊水印與PHP左上角而不是右下角
- 21. Popupwindow:ShowAsDropDown作爲右上角而不是左下角?
- 22. Excel 2003,如何獲取範圍的左上角和右下角?
- 23. 如何在右下角顯示左側div?
- 24. Javafx Labeled labelPaddingProperty - 在左上角或右上角添加三角形
- 25. 懸停圖像 - 在其上顯示div
- 26. 使圖像顯示在懸停上
- 27. 無法在Wpf畫布上從右下角到左上角繪製矩形
- 28. 浮動動作按鈕顯示在右上角而不是右下角android
- 29. Css導航下拉菜單出現在懸停的左下角
- 30. CSS懸停在點上以顯示圖像 - 不在圖像上懸停
請閱讀如何正確後問題FAQ。當你撰寫你的問題時,你會在屏幕上找到它。 – 2015-02-10 13:44:06