所以我用了：懸停{字體大小：xx px；} 但這會導致這個https://gyazo.com/d636e4e5341bfd35291bed0c41159ee0
是否有可能字體大小可以變大但棋子仍會居中？
uj5u.com熱心網友回復：
嘗試使用這個：
div {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
border: 1px solid black;
height: 100px;
text-align: center
}
div:hover {
font-size: 50px
}<div>Hi</div>uj5u.com熱心網友回復：
讓你的元素是塊元素和寬度 100%。比你更大的字體會居中。您可以將 flex 添加到父級。
display:flex; justify-content: center; align-item:center;
`.ches-text{
font-size: 12px;
text-align:center;
width: 100%;
display:block;
}
.ches-text:hover{
font-size:48px;
}
`
uj5u.com熱心網友回復：
您是否嘗試過使用 css 轉換比例？
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}<!DOCTYPE html>
<html>
<body>
<p>Hover over the image.</p>
<img class="zoom" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin.svg"/>
</body>
</html>uj5u.com熱心網友回復：
您可以更改格式大小，:hover但這不適用于您在棋盤上的情況。在您的情況下，每個正方形都應該是一個單獨的影像，可以獨立懸停。
.ImageToZoom{
transition: transform 0.2s;
}
.ImageToZoom:hover {
transform: scale(1.5);
}
uj5u.com熱心網友回復：
您可以使用 flex 簡單地做到這一點。在 chess-txt 上放置另一個包裝器并為其提供 display: flex 。
<parent-txt>
<ches-text></ches-text>
</parent-txt>
For instance;
.parent-txt{
display: flex;
}
.ches-text{
font-size:10px;
margin: auto;
}
.ches-text:hover{
font-size:48px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418302.html
標籤：