want to open the next div when hover on class firsthd

when hover want to open the only nearest or first div when hover on class firsthd
<!DOCTYPE html>
<html>
<head>
	<title>Adjustment</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
	
	<link rel="stylesheet" type="text/css" href="css/treeview.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('firsthd').mouseenter(function(e){

$('.div1').css("top",e.pageY-50+"px"); 
$('.div1').css("left",e.pageX+"px"); 
$('.div1').css("position","absolute"); 
$(this).closest("div").find(".div1").show(); 
});
$('li').mouseleave(function(){
$(this).closest("div").find(".div1").hide(); 
});
});
    
</script>
<style type="text/css">
	i{
		cursor: pointer;
	}
	.branch li{
		cursor: pointer;
	}
  .layer{
    height:250px;
    box-shadow: 5px 10px #888888;
    border:2px solid #ddd;
    display: none;
    z-index: 1;
    background-color: #fff; 
    padding-left: 0px;
    font-size: 11px;
  }
</style>
</head>
<body>
	<div class="container-fluid">
	 <div class="btn-group">
    <a href="balance_summary.html" class="btn btn-primary">Liquidity Dashboard</a>
    <a href="treeview.html" class="btn btn-primary active">Tree View</a>
    <a href="Map_view.html" class="btn btn-primary">Map View</a>
    <a href="alert.html" class="btn btn-primary">Alerts</a>
    <a href="#" class="btn btn-primary">Market Guides</a>
    <a href="pop1.html" class="btn btn-primary">Linked Clients</a>
  </div>
	    <div class="row">
	        <div class="col-md-4">
	            <ul id="tree1">
	                <li>
	                	  <a class="firsthd">13340031 8013339955XX XX EUR 65,95,351.</a>
                          <div class="div1 col-md-8 layer";>
                                <label class="col-md-7 text-right">Account Number:</label>
                                <div class="col-md-5">11238920</div>
                                <label class="col-md-7 text-right">Account Name:</label>
                                <div class="col-md-5">8011238920xxx</div>
                            </div>
                            

	                    <ul>

	                       <li>

                                <a  class="firsthd">13340031 8013339955XX XX EUR 65,95,451.</a>
                                    <div class="div1 col-md-8 layer"   >
                                        <label class="col-md-7 text-right">Account Number:</label>
                                        <div class="col-md-5">11238940</div>
                                        <label class="col-md-7 text-right">Account Name:</label>
                                        <div class="col-md-5">8011238920xxx</div>
                                    </div>
                            </li>
                               
	                        <li>
                                <a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div>
                            </li>
	                    </ul>
	                </li>
	                <li>
                        <a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div>
	                    <ul>
	                        <li><a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div></li>
	                        
	                        <li><a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div></li>
	                    </ul>
	                </li>
	                <li>
                    <a id="thirdhd" href="#">
                      13340055
                			8013339955XX XX
                			EUR
                			42,009.33</a>
	                    <ul>
	                        <li id="five">13340055
                			8013339955XX XX
                			EUR
                			22,004</li>
	                       
	                        <li id="six">13340055
                			8013339955XX XX
                			EUR
                			20,004</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="fourhd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			10,709,491.34</a>
	                    <ul>
	                        <li id="seven">13340074
                			8013339955XX XX
                			EUR
                			53,64,745.5</li>
	                       
	                        <li id="eight">13340074
                			8013339955XX XX
                			EUR
                			53,44,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="fivehd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			4,709,491.15</a>
	                    <ul>
	                        <li id="nine">13340074
                			8013339955XX XX
                			EUR
                			23,44,745.5</li>
	                       
	                        <li id="ten">13340074
                			8013339955XX XX
                			EUR
                			23,64,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="sixhd" href="#">13340074
                			8013339955XX XX
                			EUR
                			8,709,491.43</a>
	                    <ul>
	                        <li id="eleven">13340074
                			8013339955XX XX
                			EUR
                			43,57,745.5</li>
	                       
	                        <li id="twelve">13340074
                			8013339955XX XX
                			EUR
                			43,51,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="sevenhd" href="#">
                    13340074
                			8013339955XX XX
                			EUR
                			11,709,491.41</a>
	                    <ul>
	                        <li id="three2">13340074
                			8013339955XX XX
                			EUR
                			58,64,745.5</li>
	                       
	                        <li id="four2">13340074
                			8013339955XX XX
                			EUR
                			58,44,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="eighthd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			97,09,491.02</a>
	                    <ul>
	                        <li id="five2">13340074
                			8013339955XX XX
                			EUR
                			48,54,745.5</li>
	                       
	                        <li id="six2">13340074
                			8013339955XX XX
                			EUR
                			48,54,745.5</li>
	                    </ul>
	                </li>
	            </ul>
	        </div>
	    </div>
	</div>
	
  	<script src="js/treeview.js"></script>
</body>
</html>

Open in new window

kumar naikGraphic DesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Fabio AmorimDelphi DeveloperCommented:
Add this to your style block:
.firsthd{
  	position: relative;
  }
  .div1{
  	position: absolute;
  }
  .firsthd:hover .div1{
  	display: block;
  }

Open in new window


and change the 'firsthd' class to the 'li' tag:

<ul>
  <li class="firsthd">

      <a  href="#">13340031 8013339955XX XX EUR 65,95,451.</a>
          <div class="div1 col-md-8 layer">
              <label class="col-md-7 text-right">Account Number:</label>
              <div class="col-md-5">11238940</div>
              <label class="col-md-7 text-right">Account Name:</label>
              <div class="col-md-5">8011238920xxx</div>
          </div>
  </li>

  <li class="firsthd">

      <a href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
      <div class="div1 col-md-8 layer">
          <label class="col-md-7 text-right">Account Number:</label>
          <div class="col-md-5">11238960</div>
          <label class="col-md-7 text-right">Account Name:</label>
          <div class="col-md-5">8011238920xxx</div>
      </div>
  </li>
</ul>

Open in new window

0
kumar naikGraphic DesignerAuthor Commented:
after changing the code. on hover of first li  it is not displayed. and on hover two  divs are opening
<!DOCTYPE html>
<html>
<head>
	<title>Adjustment</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
	
	<link rel="stylesheet" type="text/css" href="css/treeview.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.firsthd').mouseenter(function(e){
$(".div1").show(); 
});
$('.firsthd').mouseleave(function(){
$(".div1").hide(); 
});
});
    
</script>
<style type="text/css">
	i{
		cursor: pointer;
	}
	.branch li{
		cursor: pointer;
	}
  .layer{
    height:auto;
    box-shadow: 5px 10px #888888;
    border:2px solid #ddd;
    display: none;
    z-index: 1;
    background-color: #fff; 
    padding-left: 0px;
    font-size: 11px;
  }
  .firsthd{
    position: relative;
  }
  .div1{
    position: absolute;
  }
  .firsthd:hover .div1{
    display: block;
  }
</style>
</head>
<body>
	<div class="container-fluid">
	 <div class="btn-group">
    <a href="balance_summary.html" class="btn btn-primary">Liquidity Dashboard</a>
    <a href="treeview.html" class="btn btn-primary active">Tree View</a>
    <a href="Map_view.html" class="btn btn-primary">Map View</a>
    <a href="alert.html" class="btn btn-primary">Alerts</a>
    <a href="#" class="btn btn-primary">Market Guides</a>
    <a href="pop1.html" class="btn btn-primary">Linked Clients</a>
  </div>
	    <div class="row">
	        <div class="col-md-4">
	            <ul id="tree1">
	                <li class="firsthd">
	                	  13340031 8013339955XX XX EUR 65,95,351.
                          <div class="div1 col-md-8 layer";>
                                <label class="col-md-7 text-right">Account Number:</label>
                                <div class="col-md-5">11238920</div>
                                <label class="col-md-7 text-right">Account Name:</label>
                                <div class="col-md-5">8011238920xxx</div>
                            </div>
                            

	                    <ul>

	                      <li class="firsthd">13340031 8013339955XX XX EUR 65,95,451.
                                    <div class="div2 col-md-8 layer"   >
                                        <label class="col-md-7 text-right">Account Number:</label>
                                        <div class="col-md-5">11238940</div>
                                        <label class="col-md-7 text-right">Account Name:</label>
                                        <div class="col-md-5">8011238920xxx</div>
                                    </div>
                            </li>
                               
	                        <li class="firsthd">13340031 8013339955XX XX EUR 65,95,651.s
                                <div class="div2 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div>
                            </li>
	                    </ul>
	                </li>
	                <li>
                        <a  href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div>
	                    <ul>
	                        <li><a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div></li>
	                        
	                        <li><a class="firsthd" href="#">13340031 8013339955XX XX EUR 65,95,651.</a>
                                <div class="div1 col-md-8 layer"   >
                                    <label class="col-md-7 text-right">Account Number:</label>
                                    <div class="col-md-5">11238960</div>
                                    <label class="col-md-7 text-right">Account Name:</label>
                                    <div class="col-md-5">8011238920xxx</div>
                                </div></li>
	                    </ul>
	                </li>
	                <li>
                    <a id="thirdhd" href="#">
                      13340055
                			8013339955XX XX
                			EUR
                			42,009.33</a>
	                    <ul>
	                        <li id="five">13340055
                			8013339955XX XX
                			EUR
                			22,004</li>
	                       
	                        <li id="six">13340055
                			8013339955XX XX
                			EUR
                			20,004</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="fourhd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			10,709,491.34</a>
	                    <ul>
	                        <li id="seven">13340074
                			8013339955XX XX
                			EUR
                			53,64,745.5</li>
	                       
	                        <li id="eight">13340074
                			8013339955XX XX
                			EUR
                			53,44,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="fivehd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			4,709,491.15</a>
	                    <ul>
	                        <li id="nine">13340074
                			8013339955XX XX
                			EUR
                			23,44,745.5</li>
	                       
	                        <li id="ten">13340074
                			8013339955XX XX
                			EUR
                			23,64,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="sixhd" href="#">13340074
                			8013339955XX XX
                			EUR
                			8,709,491.43</a>
	                    <ul>
	                        <li id="eleven">13340074
                			8013339955XX XX
                			EUR
                			43,57,745.5</li>
	                       
	                        <li id="twelve">13340074
                			8013339955XX XX
                			EUR
                			43,51,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="sevenhd" href="#">
                    13340074
                			8013339955XX XX
                			EUR
                			11,709,491.41</a>
	                    <ul>
	                        <li id="three2">13340074
                			8013339955XX XX
                			EUR
                			58,64,745.5</li>
	                       
	                        <li id="four2">13340074
                			8013339955XX XX
                			EUR
                			58,44,745.5</li>
	                    </ul>
	                </li>
	                <li>
                    <a id="eighthd" href="#">
                      13340074
                			8013339955XX XX
                			EUR
                			97,09,491.02</a>
	                    <ul>
	                        <li id="five2">13340074
                			8013339955XX XX
                			EUR
                			48,54,745.5</li>
	                       
	                        <li id="six2">13340074
                			8013339955XX XX
                			EUR
                			48,54,745.5</li>
	                    </ul>
	                </li>
	            </ul>
	        </div>
	    </div>
	</div>
	
  	<script src="js/treeview.js"></script>
</body>
</html>

Open in new window

0
Julian HansenCommented:
You can do this with CSS using the adjacent sibling operator (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)
.firsthd + div {
   display: none;
}

.firsthd:hover + div {
    display: block;
}

Open in new window

The above code will show / hide the <div> immediately after the element with class .firsthd that you hover over.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kumar naikGraphic DesignerAuthor Commented:
thanks for your support
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.