CODEWITHSUNDEEP
phpjqueryhtml
Mohan
Mohan

Reputation: 289

Show li dynamically on hover using jquery

On hover of "category_name" class I want to show particular products for particular category.

For example for round neck tshirt it should show round neck - half sleeve, for v neck tshirt - v neck - plain half sleeve , for collar/polo t shirt - single line tipping, but when hover on round neck t-shirt it is showing all the products.

When I hover on round it should show li with id as product_183.

How to resolve this?

Below is my code:

<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_154" class="category_name">Round neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_183">
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183">Round Neck - Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_155" class="category_name">V- neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_184">
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184">V Neck - Plain Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_156" class="category_name">Collar/Polo T-shirt (1)</a>
    <ul class="tabInner">
    <li id="product_185">
    <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
    <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185">Single Line Tipping</a>
    </li>
    <!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143">More...</li> -->
    </ul>
</li>

Juqery code,

$(".category_name").hover(function(){
  //alert("coming");
  $('#product_183').show();
  $('#product_184').hide();
  // alert(product_id);
});

Upvotes: 0

Views: 68

Answers (3)

Amani Ben Azzouz
Amani Ben Azzouz

Reputation: 2565

If you want to only show items of the hovered li you can try this:

$(".navTab").hover(function(){
   $(this).find('ul').show();
   $(this).siblings().find('ul').hide();
});
/**initially hide ul*/
.tabInner{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<li class="navTab">
    <a href="#" class="category_name">Round neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_183">
        <a href="#" ><img src="" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
        <a href="#">Round Neck - Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="#" class="category_name">V- neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_184">
            <a href="#" ><img src="" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
            <a href="#">V Neck - Plain Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="#" class="category_name">Collar/Polo T-shirt (1)</a>
    <ul class="tabInner">
    <li id="product_185">
    <a href="#" ><img src="" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
    <a href="#">Single Line Tipping</a>
    </li>
  </ul>
</li>

Upvotes: 1

Vimal
Vimal

Reputation: 1146

Try this by replacing ur html and jquery by this

    $("#Round").hover(function(){
        //alert("coming");
        $('#product_183').show();
        $('#product_184').hide();
        $('#product_185').hide();
        // alert(product_id);
    });
    $("#Vneck").hover(function(){
        //alert("coming");
        $('#product_183').hide();
        $('#product_184').show();
        $('#product_185').hide();
        // alert(product_id);
    });
    $("#Collar").hover(function(){
        //alert("coming");
        $('#product_183').hide();
        $('#product_184').hide();
        $('#product_185').show();
        // alert(product_id);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="navTab">
        <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_154" id="Round" class="category_name">Round neck T-shirt (1)</a>
        <ul class="tabInner">
            <li id="product_183" style="display: none">
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183">Round Neck - Half Sleeve</a>
            </li>
        </ul>
    </li>
    <li class="navTab">
        <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_155" id="Vneck" class="category_name">V- neck T-shirt (1)</a>
        <ul class="tabInner">
            <li id="product_184" style="display: none">
                <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
                <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184">V Neck - Plain Half Sleeve</a>
            </li>
        </ul>
    </li>
    <li class="navTab">
        <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_156" id="Collar" class="category_name">Collar/Polo T-shirt (1)</a>
        <ul class="tabInner">
        <li id="product_185" style="display: none">
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185">Single Line Tipping</a>
        </li>
        <!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143">More...</li> -->
        </ul>
    </li>

let me know the result

Upvotes: 0

Suresh
Suresh

Reputation: 5987

One more sample code...

JQuery Code

$(".category_name").hover(function(){

    var product_id = $(this).attr('product_id');
    console.log('product_id : '+product_id);

    if(product_id == 'product_183' ){
        $('#product_183').show();
        $('#product_184').hide();
        $('#product_185').hide();
    }

    if(product_id == 'product_184' ){
        $('#product_183').hide();
        $('#product_184').show();
        $('#product_185').hide();
    }

    if(product_id == 'product_185' ){
        $('#product_183').hide();
        $('#product_184').hide();
        $('#product_185').show();
    }
});

HTML Code

<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_154" product_id='product_183' class="category_name">Round neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_183">
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183" ><img src="http://192.168.1.156/dutees/image/cache/catalog/roundneck-270x300.jpg" alt="Round Neck - Half Sleeve" title="Round Neck - Half Sleeve" class="img-responsive" /></a>
        <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=183">Round Neck - Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_155" product_id='product_184' class="category_name">V- neck T-shirt (1)</a>
    <ul class="tabInner">
        <li id="product_184">
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="V Neck - Plain Half Sleeve" title="V Neck - Plain Half Sleeve" class="img-responsive" /></a>
            <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=184">V Neck - Plain Half Sleeve</a>
        </li>
    </ul>
</li>
<li class="navTab">
    <a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143_156" product_id='product_185' class="category_name">Collar/Polo T-shirt (1)</a>
    <ul class="tabInner">
    <li id="product_185">
    <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185" ><img src="http://192.168.1.156/dutees/image/cache/catalog/singlelinetipping-270x300.jpg" alt="Single Line Tipping" title="Single Line Tipping" class="img-responsive" /></a>
    <a href="http://192.168.1.156/dutees/index.php?route=product/product&amp;path=&amp;product_id=185">Single Line Tipping</a>
    </li>
    <!-- <li><a href="http://192.168.1.156/dutees/index.php?route=product/category&amp;path=143">More...</li> -->
    </ul>
</li>

Upvotes: 0

Related Questions