固定在懸停上的圖像

-2

當鼠標懸停圖像時，圖像向左移動，我希望它在移動到指向的新位置時停留。固定在懸停上的圖像

在此先感謝

.object{ 
 
    position:absolute; 
 
} 
 
.bird{ 
 
    top: 50%; 
 
    left: 64%; 
 
} 
 
#twit:hover .move{ 
 
    transform: translate(-350px,0) rotate(-360deg); 
 
    transition:all 2s linear; 
 
    
 
}

<div id="twit"> 
 
    <div class="object bird move"> 
 
    <img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg"> 
 
    <b>Welcome Home</b> 
 
    </div> 
 
</div>

來源

2016-09-01 Gowtham

你到底這個是什麼意思？你能詳細說明一下嗎？ –

當我懸停圖像時，圖像移動到左側，我希望它留在它移動到的新位置（它必須留在左側），當我移動指針時。我對這個概念很陌生，幫幫我。 – Gowtham

使用：hover psuedo，一旦將光標移開，它將回退到原來的位置，它不可能只用css「粘」在那裏。 – Ricky

你想要可以實現的，但你需要刪除:hover selector和使用，作爲css animation什麼。另一種方法是使用jQuery mouseenter event。

使用CSS動畫和刪除hover selector。

.object{ 
 
    position:absolute; 
 
} 
 
.bird{ 
 
    top: 50%; 
 
    left: 64%; 
 
} 
 
.move{ 
 
    -webkit-animation:mv 2s; 
 
    animation-fill-mode:forwards; 
 
} 
 
@-webkit-keyframes mv{ 
 
from{ 
 
    transform: translate(0,0) rotate(0deg); 
 
    } 
 
to{ 
 
    transform: translate(-350px,0) rotate(-360deg); 
 
    } 
 
}

<div id="twit"> 
 
    <div class="object bird move"> 
 
    <img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg"> 
 
    <b>Welcome Home</b> 
 
    </div> 
 
</div>

另一種方法是使用jQuery的MouseEnter事件，執行相同的css animation，但你停在新位置的元素。

$(document).ready(function(){ \t 
 
    \t $("#twit").on("mouseenter",function(){ 
 
    $("#twit > .object").addClass("nwmv"); 
 
    }); 
 
});

.object{ 
 
    position:absolute; 
 
} 
 
.bird{ 
 
    top: 50%; 
 
    left: 64%; 
 
} 
 
.nwmv{ 
 
    -webkit-animation:mvv 2s; 
 
    animation-fill-mode:forwards; 
 
} 
 
@-webkit-keyframes mvv{ 
 
from{ 
 
    transform: translate(0,0) rotate(0deg); 
 
    } 
 
to{ 
 
    transform: translate(-350px,0) rotate(-360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="twit"> 
 
    <div class="object bird move"> 
 
    <img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg"> 
 
    <b>Welcome Home</b> 
 
    </div> 
 
</div>

使用JavaScript，

var b = document.getElementById("twit"); 
 
b.onmouseenter = function mv(){ 
 
var a = document.querySelector(".move"); 
 
a.style.transition = "2s ease"; 
 
a.style.transform = "translate(-350px,0) rotate(-360deg)"; 
 
}

.object{ 
 
    position:absolute; 
 
} 
 
.bird{ 
 
    top: 50%; 
 
    left: 64%; 
 
}

<div id="twit"> 
 
    <div class="object bird move"> 
 
    <img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg"> 
 
    <b>Welcome Home</b> 
 
    </div> 
 
</div>

來源

2016-09-01 06:54:13 frnt

這是我期待的，我可以在JavaScript中做到這一點，而不是在jquery – Gowtham

@Gowtham使用Javascript檢查更新的代碼。這是使用懸停選擇器不可能的。 – frnt

這就是我一直在尋找的，歡呼！ – Gowtham

固定在懸停上的圖像

回答

相關問題