logo
down
shadow

List hover show images jquery


List hover show images jquery

Content Index :

List hover show images jquery
Tag : jquery , By : jedameron
Date : December 05 2020, 12:22 PM

hop of those help? Hi i need to do when list item mouseover change image(other div) with the same index and it must be stay when it is clicked.When mouseleave it must be what before clicked or whichone active. i did something but not working.
$(function(){
    var index = 0;
    $('.left-side ul li').hover(function() {
        $('.right-side img').eq($(this).index()).addClass("active");
        $('.right-side img').eq($(this).index()).siblings("img").removeClass("active");
    }, function() {
        $('.right-side img').eq($(this).index()).removeClass("active");
        $('.right-side img').eq(index).addClass("active");
    });

    $('.left-side ul li').click(function(){
        index = $(this).index();
        var element = $('.right-side img').eq($(this).index());
        element.addClass("active");
        element.siblings('img').removeClass("active");
    });
});

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

jQuery hover slide up but show first list item always


Tag : jquery , By : Pavel K.
Date : March 29 2020, 07:55 AM
Does that help Just had a quick go, is this along the right lines of what you want to do? http://jsfiddle.net/cUFNR/

jquery iterate list images with timer and hover


Tag : jquery , By : Tornike
Date : March 29 2020, 07:55 AM
help you fix your problem I have a list where li's have img's. The images are thumbnails and there is another div where the large version of the thumbs should be iterated through. Also when the user wands over the thumbnail the large image iteration should halt and display what is hovered over. , I made this for you, take a look...
Live Demo:

Select List closes on hover of Option inside jQuery Show/Hide Div on Hover


Tag : javascript , By : user94076
Date : March 29 2020, 07:55 AM
will help you I have set a div through jQuery to show and hide on hover of an item. Within the div I have dropdowns, but when I click on the Select List and hover on the Options List, the Select Menu closes instantly. , use mouseenter and mouseleave instead of mouseover and mouseout
    $(".tiptext").mouseenter(function() {
        $(this).children(".description").show();
    }).mouseleave(function() {
        $(this).children(".description").hide();
    });

jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images


Tag : javascript , By : MrSparky
Date : March 29 2020, 07:55 AM
it helps some times It is because of the queuing nature of animation commands, in your case you need to force jQuery to complete all the previously queued animation before showing/hiding an element. You can use .stop() to do this.
Also your solution looks quite complecated, I've made some dom changes also to make it simple
<table>
    <tr>
        <td>
            <img src="http://placehold.it/150x150" id="image1" alt="description" width="150px" class="content-img" data-target="#content1" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image2" alt="description" width="150px" class="content-img" data-target="#content2" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image3" alt="description" width="150px" class="content-img" data-target="#content3" />
        </td>
    </tr>
    <tr>
        <td colspan="3" style="height:100px">
            <div id="default">
                 <h1>default</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content1">
                 <h1>content 1</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content2">
                 <h1>content 2</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content3">
                 <h1>content 3</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </td>
    </tr>
</table>
//initial
var timer = 200;
jQuery(function ($) {
    var inside = false;
    $("#content1, #content2, #content3").hide();
    $(".content-img").hover(function () {
        inside = true;
        var $target = $($(this).data('target'));
        $("#default").stop(true, true).hide(timer, function () {
            if (inside) {
                $target.stop(true, true).show(timer);
            }
        });
    }, function () {
        inside = false;
        $($(this).data('target')).stop(true, true).hide(timer, function () {
            if (!inside) {
                $("#default").stop(true, true).show(timer);
            }
        });
    });

});

How to show different images using .hover() jQuery


Tag : javascript , By : Shane
Date : March 29 2020, 07:55 AM
seems to work fine You could associate the span with a particular image via a data attribute and id.
$(".displayImage").hover(function(){
    // $(this).attr('data-img') == 'azotea' or 'nivel8'
    // so we end up with $('#azotea').show(), for example.
    $('#' + $(this).attr('data-img')).show();
}, function () {
  $('#' + $(this).attr('data-img')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td style="width: 20%;" class="text-center">
                <span class="displayImage" data-img='azotea'>Azotea </span>
                <span class="displayImage" data-img='nivel8'>Nivel 8 </span>
            </td>
        </tr>
    </tbody>
</table>
<div class="col-lg-5 text-left">
    <img class="displayed" src="images/azotea-n9.jpg" alt="azotea" id="azotea">
    <img class="displayed" src="images/test2.jpg" alt="nivel 8" id="nivel8">
</div>
Related Posts Related QUESTIONS :
  • Is it safe to use .serialize() in user input?
  • How do we assign the URL to the respective image which is randomly appearing?
  • How to correctly use jQuery extend
  • How to fit iframe content size to its div area in bootstrap 4 when the window is shrunk?
  • How to Set a Different Image for Each Row in a jQuery Table using CSS
  • Toggle button appears but does not toggle when clicked
  • How to add full calendar date to dynamic textboxes
  • MultiDatesPicker for jQuery UI is not showing
  • How do I replace all hashtags in a contenteditable div with a hyperlink while ignoring previously replaced hashtags?
  • posting to aweber with jQuery
  • Why does not Modal dialog work with latest version of Jquery?
  • Cancel draggable dragging
  • Validate subset of a form using jQuery Validate plugin
  • jquery how to make insertBefore work only once, on first click?
  • jquery appendTo form
  • Jquery code working in all browsers apart from FF
  • jquery syntax function(){mylongfunc();} vs. just mylongfunc();
  • jQuery.load doesn't execute javascript with document.write
  • Animate hidden hyperlink to display:block
  • jquery ajax call returning error when its not an error
  • Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists
  • Adding link with existing href
  • jquery cycle plugin divs always stacked problem
  • jquery toggle and fade in one function?
  • JQuery UI Tabs caching
  • Drag and Drop into another div and move in the div only using jquery
  • Links in rounded boxes? In ALL browsers (yep included IE8)
  • How to change the content of the Span using jQuery?
  • jQuery; combine user click and :checked
  • jQuery - Finding the element index relative to its container
  • jQuery .each() function. Resetting the index?
  • jQuery storing settings
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com