讓div在懸停後保持原位

我想讓div標籤在懸停圖像後保持原位。截至目前，當我懸停圖像時，div移動到右側。我嘗試使用固定位置和絕對，但沒有運氣。下面是HTML代碼：讓div在懸停後保持原位

<div> 
<button class="buttonTest"></button> 
</div>

在CSS：

.buttonTest{ 
    background-image: url('http://hd-wall-papers.com/images/wallpapers/random-  image/random-image-16.jpg'); 
    width:150px; 
    height:150px; 

} 

div { 
    border-style: solid; 
    height:auto; 
    width:150px; 
} 

div{ 
    transition: all .2s ease-in-out; 
} 

div:hover{ 
    border-width:75px; 
    transform: scale(.5); 
}

在codepen：https://codepen.io/dxs6040/pen/gmPgzz/

來源

2017-03-01 Daniel Saavedra

這有點不清楚你的最終目標是什麼。這是你想要做的嗎？ https://codepen.io/mcoker/pen/vxLZRW –

是的！此外，我希望邊框寬度變粗，以使其看起來像鼠標按下按鈕。 –

更新了筆https://codepen.io/mcoker/pen/vxLZRW –

使用盒大小：邊界盒和一些變化。這是期望的行爲嗎？

.buttonTest{ 
 
background-image: url('http://hd-wall-papers.com/images/wallpapers/random-image/random-image-16.jpg'); 
 
    width:100%; 
 
    height:100%; 
 

 
} 
 

 

 
div { 
 
    border-style: solid; 
 
    height:150px; 
 
    width:150px; 
 
    transition: all .2s ease-in-out; 
 
    box-sizing: border-box; 
 
} 
 

 
div:hover{ 
 
    border-width:15px; 
 
    transform: scale(.80); 
 
}

<div> 
 
<button class="buttonTest"></button> 
 
</div> 
 
<div> 
 
<button class="buttonTest"></button> 
 
</div>

來源

2017-03-01 19:55:46

讓div在懸停後保持原位

回答

相關問題