@mouseover @mouseout @mouseenter @mouseleave 區(qū)別
不干擾到子元素
mouseenter：當(dāng)鼠標(biāo)移入某元素時觸發(fā)。鼠標(biāo)只要在元素內(nèi)就不再觸發(fā)。不干擾到子元素
mouseleave：當(dāng)鼠標(biāo)移出某元素時觸發(fā)。只是移出時觸發(fā)一次；
會干擾到子元素
mouseover：當(dāng)鼠標(biāo)移入某元素，移入和移出其子元素時觸發(fā)。鼠標(biāo)在元素內(nèi)移動，只要鼠標(biāo)不斷在其子元素間劃來劃去就會不斷觸發(fā)。
mouseout：當(dāng)鼠標(biāo)移出某元素，移入和移出其子元素時觸發(fā)。鼠標(biāo)在元素內(nèi)移動，只要鼠標(biāo)不斷在其子元素間劃來劃去就會不斷觸發(fā)。
mousemove：鼠標(biāo)在某元素上移動時觸發(fā)，不管是不是在其子元素上移動。
鼠標(biāo)懸停，圖片改變
template文章來源：http://www.zghlxwxcb.cn/news/detail-585908.html
<div class="hoverbox" @mouseover="changeIndex(1)" @mouseout="changeIndexBack(1)">
<img src="../assets/img/adv_1.png" alt="" v-show="!showimg1" />
<img src="../assets/img/adv_a1.png" alt="" v-show="showimg1" />
</div>
js文章來源地址http://www.zghlxwxcb.cn/news/detail-585908.html
export default {
data() {
return {
showimg1:false,
showimg2:false,
}
},
methods: {
// 移入
changeIndex(e){
this[`showimg${e}`] = true;
},
// 移出
changeIndexBack(e){
this[`showimg${e}`] = false;
},
}
}
到了這里，關(guān)于【css】vue 鼠標(biāo)移入移出 更改圖片 @mouseover @mouseout @mouseenter @mouseleave 區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
