整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文實例為大家分享了vue實現鼠標移入移出事件的具體代碼，供大家參考，具體內容如下：
html 代碼
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit" :key="index">
<div class="indexItem">
<span :title="item.name">{{item.name}}</span>
<span class="mypor">
<i class="icon" @mouseenter="onMouseenter(index)" @mouseleave="onMouseleave"></i>
<div v-show="vShow&&index==cur" class="index-show">
<div class="tip_Wrapinner">{{item.det}}</div>
</div>
</span>
</div>
</div>js 代碼
lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>33-jquery移入移出事件</title>
<style type="text/css"> /*樣式開始*/
*{ /*表示 所選取的該元素以及其所屬的子元素 */
margin: 0; /*外邊距*/
padding: 0; /*內邊距*/
}
.father{ /* 選中class叫父親的div盒子*/
width: 200px; /* 寬：200像素*/
height: 200px; /* 高：200像素*/
background: red; /* 背景：紅色*/
}
.son{ /* 選中class叫兒子的div盒子*/
width: 100px; /* 寬：100像素*/
height: 100px; /* 高：100像素*/
background: #0000FF; /* 背景：藍色*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script> <!--引入jQuery 否則后面的$符號不能用 -->
<script>
$(function(){ /* jQuery 的入口函數 */
// alert('入口函數') /* 入口函數沒有錯誤就會彈出 */
/*
mouseover mouseout 事件， 子元素被移入移出，也會觸發父元素的事件
*/
// $(".father").mouseover(function(){ /*選擇class叫父親的div的鼠標移入事件*/
// alert('鼠標進入了父親的盒子區域') /* 彈出窗口'鼠標進入了父親的盒子區域'*/
// })
// $(".father").mouseout(function(){ /*選擇class叫父親的div的鼠標移出事件*/
// alert('鼠標移出了父親的盒子區域') /* 彈出窗口'鼠標移出了父親的盒子區域'*/
// })
/*mouseenter mouseleave 事件， 子元素被移入移出，不會觸發父元素的事件 */
// $(".father").mouseenter(function(){ /*選擇class叫父親的div的鼠標移入事件*/
// alert('鼠標進入了父親的盒子區域') /* 彈出窗口'鼠標進入了父親的盒子區域'*/
// })
// $(".father").mouseleave(function(){ /*選擇class叫父親的div的鼠標移出事件*/
// alert('鼠標移出了父親的盒子區域') /* 彈出窗口'鼠標移出了父親的盒子區域'*/
// })
// $(".father").hover(function(){ /* 同時監聽鼠標移入移出的事件用hover 子元素被移入移出，不會觸發父元素的事件*/
// console.log('鼠標移入了') /* 移入后調用*/
// }, function(){
// console.log('鼠標移出了') /* 移出后調用*/
// })
$(".father").hover(function(){ /* 同時監聽鼠標移入移出的事件用hover 子元素被移入移出，不會觸發父元素的事件*/
console.log('鼠標移入移出了') /*鼠標移入和移出都監聽了*/
})
})
</script>
</head>
<body>
<div class="father"> <!-- class叫父親的div盒子 -->
<div class="son"> <!-- class叫兒子的div盒子 -->
</div>
</div>
</body>
</html>
、HTML
<img id="img1" src="luban.jpg" alt="" />
二、CSS
#img1{
opacity:0.3;
}
三、javascript
window.onload=function(){
var oImg=document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100);
}
oImg.onmouseout=function(){
startMove(30);
}
}
var opac=30;
var timer=null;
fuicntion startMove(iTarget){
var oImg=document.getElementById('img1');
clearInterval(timer);
var iSpeed=0;
timer=setInterval(function(){
if(opac<iTarget){
iSpeed=1;
}else{
iSpeed=-1;
}
if(opac==iTarget){
clearInterval(timer);
}else{
opac+=iSpeed;
oImg.style.opacity=opac/100;
},30)
四、最終效果
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
