on hover show the particular div with class or with any other value how please try to solve it

want to show a particular div when hover on anchor with jquery
<!DOCTYPE html>
<html>
<head>
    <title>own tree view</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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(){
        $.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});


//Initialization of treeviews

$('#tree1').treed();


$('ul > li a').hover(function(e){
    $('.hovershow').toggle();

  
});


         

    
});


    </script>
<style type="text/css">
        .tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}
    </style>
</head>
<body>
        <div class="container" style="margin-top:30px;">
        <div class="row">
            <div class="col-md-4">
                <ul id="tree1">
                    <li><a href="#">23232323232323232323232323</a>
    
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                            <li><a href="#">23232323232323232323232323</a>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" style="display: none;" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
          
            
        </div>
    </div>

</body>
</html>

Open in new window

kumar naikGraphic DesignerAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. Couple of ways of doing this. Probably the easiest is to 'tag' the <a> with the ID of the DIV you want to show. You can do this either by using a data attribute, or by setting the href on the link:

<a href="#boxlink1" class="product-link">...</a>
<a href="#boxlink2" class="product-link">...</a>

Then in your jQuery, you would have:

$('.product-link').hover(
    function() {
        $( $(this).attr('href') ).show();
    },
    function() {
        $( $(this).attr('href') ).hide();
    }
);

Open in new window

0
 
Chris StanyonCommented:
You haven't said which div you want to show, but the general idea is:

$('a').hover(
    function() {
        $('#someDiv').show();
    },
    function() {
        $('#someDiv').hide();
    }
);

Open in new window

the hover event can take 2 functions - one for when you hover over and element and the second for when you mouseout (un-hover!)
0
 
kumar naikGraphic DesignerAuthor Commented:
if hover on 1st id  link0  the boxlink0  div should show  2nd hover on 2nd id link1 the boxlink1 div should show
<!DOCTYPE html>
<html>
<head>
    <title>own tree view</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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(){
        $.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});


//Initialization of treeviews

$('a').hover(
    function() {
        $('.product-link').show();
    },
    function() {
        $('.product-link').hide();
    }
);

         

    
});


    </script>
<style type="text/css">
        .tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}

.boxlink {
    display: none;
}
#boxlink0 {
    display: block;
}



    </style>
</head>
<body>
        <div class="container" style="margin-top:30px;">
        <div class="row">
            <div class="col-md-4">
                <ul id="tree1" class="productlist">
                    <li><a href="#" id="link0" class="product-link">23232323232323232323232323</a>
    
                        <ul>
                            <li><a href="#" id="link1" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link2" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link3" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#" id="link4" class="product-link">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#" id="link5" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link6" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link7" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#" id="link8" class="product-link">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#" id="link9" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link10" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link11" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#" id="link12" class="product-link">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#" id="link13" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link14" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link15" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#" id="link16" class="product-link">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#" id="link17" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link18" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link19" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                    <li><a href="#" id="link20" class="product-link">23232323232323232323232323</a>
                        <ul>
                            <li><a href="#" id="link21" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link22" class="product-link">23232323232323232323232323</a>
                            <li><a href="#" id="link23" class="product-link">23232323232323232323232323</a>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="boxlink0" class="col-md-4 hovershow boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink1" class="col-md-4 hovershow boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink2"  class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink3" class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink4" class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink5" class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div id="boxlink6" class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div  id="boxlink6" class="col-md-4 boxlink" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 hovershow" >
                <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
                 <label class="col-md-4 text-right">name:</label>
                <div class="col-md-8 ">xxxxxxxxx12121xxxx1212xx</div>
                <div class="clearfix"></div>
            </div>
          
            
        </div>
    </div>

</body>
</html>

Open in new window

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
kumar naikGraphic DesignerAuthor Commented:
thanku for your support . best solution.  can you send me the other procedure for this so that i can check if available thanks for your support
0
 
Chris StanyonCommented:
No worries Kumar.

If you want to do it with data attributes, then your <a> elements would look ilke this:

<a href="#" data-showdiv="#boxlink1" class="product-link">...</a>
<a href="#" data-showdiv="#boxlink2" class="product-link">...</a>

And your jQuery would look like:

$('.product-link').hover(
    function() {
        $( $(this).data('showdiv') ).show();
    },
    function() {
        $( $(this).data('showdiv') ).hide();
    }
);

Open in new window

0
 
kumar naikGraphic DesignerAuthor Commented:
thanku
0
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.

All Courses

From novice to tech pro — start learning today.