0

I have a three div's on a page & each div have his own scroll. i am trying to view scroll on the hover of particular div the function is below.. Plz have any suggestion. function is currently working but on hover it show all scrolls of page (means 3 scrolls of these 3 div's) because each div has a same class & I can not change a class or cant add ID to div.. 

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

2 回答 2

0 
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>
于 2013-03-20T12:52:03.867 回答
0

尝试;

$(document).ready(function() { 
   $('.leftPanelFixed').hover(function(){ 
       var $this = $(this);    
       $this.$('.jspVerticalBar').addClass('viewScroll');    
       },     
   function(){    
        $this.removeClass('viewScroll');     
   });
 });
于 2013-03-19T11:40:48.310 回答