如何在開始時顯示影像的左側，并在滑鼠懸停時顯示右側。
body{
background:gray;
}
img{
width: 100px;
}
img:hover {
} <img src="https://i.stack.imgur.com/AQdqr.png" >uj5u.com熱心網友回復：
我不確定這是否是您需要的，但您自己可以為您的任務重新制作此代碼。
body {
background: gray;
}
img {
width: 50px;
height: 50px;
object-fit: cover;
object-position: 0;
}
img:hover {
object-position: 100%;
}<img src="https://i.stack.imgur.com/AQdqr.png">uj5u.com熱心網友回復：
我將建議添加一個包含兩個元素的容器：您的影像和一個隱藏一半影像的 div，在懸停時我們將洗掉 div 以顯示您的 img
.container{
position:relative;
width:150px;
height:150px;
border:2px solid black;
}
.container:hover .bg{
width:0%;
}
.bg{
transition:all .2s;
position:absolute;
right:0;
width:50%;
height:100%;
background:white;
}
img{
position:absolute;
height:100%;
object-fit: contain;
}<div class="container">
<img src="https://i.stack.imgur.com/AQdqr.png"/>
<div class="bg"></div>
</div>uj5u.com熱心網友回復：
你不清楚你想要什么。我認為您在將滑鼠懸停在圖片上時想要不同的顏色。
為此，將此圖片裁剪為單個物件。然后你可以在懸停時使用 css 灰度過濾器。
body {
background: gray;
}
img {
width: 100px;
}
img:hover {
filter: grayscale(100%);
transition: 1s;
}<img src="https://i.stack.imgur.com/AQdqr.png">轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/512723.html
標籤：htmlcss图片
上一篇：用保持大小的影像填充行內容
下一篇：如何每頁列印多個影像