In jquery, how to make the corresponding sequence of ul hover to display the corresponding div, and the mouse can remove the ul to the div and the div does not disappear

I"m sorry I didn"t ask my question very clearly, but in fact, my actual request is like this.
my ul.header_category_list and div.header_category_contents are positioned through the left and right structure, and the mouseover and mouseout of the jquery I wrote can only be displayed when the nth li is displayed when the mouse hovers over the nth div.header_category_content. But when the mouse moves from the li to the corresponding div.header_category_content, the corresponding div.header_category_content disappears immediately and cannot be displayed.

< H2 > when I want to implement it, the div.header_category_content corresponding to the corresponding div.header_category_content, can continue to display when the mouse is moved from li to the corresponding div.header_category_content, and you can click on the contents inside. < / H2 >

< div id= "header_category" > 

  <ul class="header_category_list">
    <li class="header_category_item">1</li>
    <li class="header_category_item">2</li>
    <li class="header_category_item">3</li>
    <li class="header_category_item">4</li>
    <li class="header_category_item">5</li>
    <li class="header_category_item">6</li>
  </ul>
  <div class="header_category_contents">
    <div class="header_category_content">1</div>
    <div class="header_category_content">2</div>
    <div class="header_category_content">3</div>
    <div class="header_category_content">4</div>
    <div class="header_category_content">5</div>
    <div class="header_category_content">6</div>
</div>

< / div >

$(function () {

$("li.header_category_item").hover(
    function(){    $("div.header_category_content").eq($(this).index()).show().siblings().hide();
    },
    function(){$("div.header_category_content").hide();}
);

})

Javascript
Apr.09,2021

CSS style 

    <style type="text/css">
        -sharpcontent-wrpper div {
            display: none;
        }
    </style>

js Code


< script type= "text/javascript" > 

var lis = $("li");
for (var i = 0; i < lis.length; iPP) {
    //i
    (function(i){
        lis[i].onmouseover = function(){
            $("-sharpcontent-wrpper div").hide();
            $("-sharpcontent-wrpper div").eq(i).show();
        }
    })(i)
}

< / script >

questions are incomprehensible. The above is a code logic that allows the corresponding sequence of li to hover to display the corresponding div.

what you expect:

  1. after the li mouse is passed over, the corresponding div is displayed.
  2. after the mouse is removed from the li and the corresponding displayed div, the original displayed div is hidden.

implementation:
Css 

$(function(){
    $("li.header_category_item").mouseover(
        function(){    
            $("div.header_category_content").eq($(this).index()).show()
                .siblings().hide();
        }
    );
    $("-sharpheader_category,div.header_category_content").mouseleave(function() {
          $("div.header_category_content").hide();
    });
})

Previous: App embedded h5 page, on the adaptation of iphonex, other models are normal.

Next: How the front end passes parameters across projects

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu