Question

我在页面上有三个div＆amp;每个div都有自己的卷轴。我试图在特定div的悬停上查看滚动函数在下面.Plz有任何建议。函数当前正在工作但是在悬停时它显示页面的所有卷轴（意味着这3个div的3个卷轴）因为每个div具有相同的类和＆amp;我无法更改类或无法将ID添加到div ..

$(document).ready(function() {     
$('.leftPanelFixed').hover(function(){     
$('.jspVerticalBar').addClass('viewScroll');    
            },     
function(){    
         $('.jspVerticalBar').removeClass('viewScroll');     
});
});

Answer 1

<强>尝试;

$(document).ready(function() { 
   $('.leftPanelFixed').hover(function(){ 
       var $this = $(this);    
       $this.$('.jspVerticalBar').addClass('viewScroll');    
       },     
   function(){    
        $this.removeClass('viewScroll');     
   });
 });

Answer 2

If I am not wrong for what you wanna do, following is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
        width:600px; 
        margin:20px auto;
}
.leftPanelFixed{
    width:100%;
    height:100px;
    margin-bottom:10px;
    border:1px solid #CCC;
    position:relative;
}
.jspVerticalBar{
    background:#999;
    width:20px;
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    display:none;
}
.viewscroll{
        display:inline-block !important;
}
</style>
</head>

<body>
<div class="leftPanelFixed"><span class="jspVerticalBar">&nbsp;</span></div>
<div class="leftPanelFixed"><span class="jspVerticalBar">&nbsp;</span></div>
<div class="leftPanelFixed"><span class="jspVerticalBar">&nbsp;</span></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() { 
        $('div.leftPanelFixed').hover(function(){      $(this).find('span').addClass('viewscroll').parent('div').siblings().find('span').removeClass('viewscroll');

        });   
    });
</script>
</html>

查看特定div悬停的jscroll

2 个答案: