[ANSWERED] javascript – On hover and click to display the image

Question 1

I’ve changed your code a little to make it simple. Ideas are as follows:

Hide all of your image elements using a CSS like this:

.hoverimg ul li {
    display: none;
}

Add a data-img attribute in each of the lists in your listWrap, the value of which will correspond to the relative image like this:

<li data-img="img1"><a href="javascript:void(0);">qwerqwer</a></li>

Add mouseover and mouseout events to each of the listWrap ul and toggle that specific image in this way:

$(".listWrap ul").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});

Here is the working example:

$(".listWrap ul").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});

.listWrap li.active a {
    color: #f00;
}

.hoverimg li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hoverimg ul li {
    display: none;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<section class="">
    <div class="container-fluid">
        <div class="row">

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap">
                    <ul>
                        <li data-img="img1"><a href="javascript:void(0);">qwerqwer</a></li>
                        <li data-img="img2"><a href="javascript:void(0);">tyuityui</a></li>
                        <li data-img="img3"><a href="javascript:void(0);">opoiuiop</a></li>
                        <li data-img="img4"><a href="javascript:void(0);">mnbvzxcv</a></li>
                        <li data-img="img5"><a href="javascript:void(0);">zxcmnbv</a></li>
                        <li data-img="img6"><a href="javascript:void(0);">mnbvzxcv</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap position-relative">
                    <div class="hoverimg">
                        <ul>
                            <li id="img1"><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
                            <li id="img2"><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
                            <li id="img3"><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
                            <li id="img4"><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
                            <li id="img5"><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
                            <li id="img6"><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="mt-5 pt-5">
    <div class="container-fluid">
        <div class="row">

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap">
                    <ul>
                        <li data-img="img7"><a href="javascript:void(0);">qwerqwer</a></li>
                        <li data-img="img8"><a href="javascript:void(0);">tyuityui</a></li>
                        <li data-img="img9"><a href="javascript:void(0);">opoiuiop</a></li>
                        <li data-img="img10"><a href="javascript:void(0);">mnbvzxcv</a></li>
                        <li data-img="img11"><a href="javascript:void(0);">zxcmnbv</a></li>
                        <li data-img="img12"><a href="javascript:void(0);">mnbvzxcv</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap position-relative">
                    <div class="hoverimg">
                        <ul>
                            <li id="img7"><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
                            <li id="img8"><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
                            <li id="img9"><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
                            <li id="img10"><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
                            <li id="img11"><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
                            <li id="img12"><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Update:

Add class active in both of the first elements.
Show manually each of the first element.
Hide all active classes and shown elements inside the event.

That’s it.

$('#img1').show(); // show the first image li on page load
$('#img7').show(); // show the first image li on page load

$(".listWrap ul").on("mouseover mouseout", "li", function () {

    $(this).parentsUntil("section").find('.listWrap ul li').removeClass('active');
    $(this).parentsUntil("section").find('.hoverimg ul li').hide();

    $(this).toggleClass('active');
    $("#" + $(this).data("img")).toggle();
});

.listWrap li.active a {
    color: #f00;
}

.hoverimg li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hoverimg ul li {
    display: none;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<section class="">
    <div class="container-fluid">
        <div class="row">

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap">
                    <ul>
                        <li class="active" data-img="img1"><a href="javascript:void(0);">qwerqwer</a></li>
                        <li data-img="img2"><a href="javascript:void(0);">tyuityui</a></li>
                        <li data-img="img3"><a href="javascript:void(0);">opoiuiop</a></li>
                        <li data-img="img4"><a href="javascript:void(0);">mnbvzxcv</a></li>
                        <li data-img="img5"><a href="javascript:void(0);">zxcmnbv</a></li>
                        <li data-img="img6"><a href="javascript:void(0);">mnbvzxcv</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap position-relative">
                    <div class="hoverimg">
                        <ul>
                            <li id="img1"><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
                            <li id="img2"><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
                            <li id="img3"><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
                            <li id="img4"><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
                            <li id="img5"><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
                            <li id="img6"><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="mt-5 pt-5">
    <div class="container-fluid">
        <div class="row">

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap">
                    <ul>
                        <li class="active" data-img="img7"><a href="javascript:void(0);">qwerqwer</a></li>
                        <li data-img="img8"><a href="javascript:void(0);">tyuityui</a></li>
                        <li data-img="img9"><a href="javascript:void(0);">opoiuiop</a></li>
                        <li data-img="img10"><a href="javascript:void(0);">mnbvzxcv</a></li>
                        <li data-img="img11"><a href="javascript:void(0);">zxcmnbv</a></li>
                        <li data-img="img12"><a href="javascript:void(0);">mnbvzxcv</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="listWrap position-relative">
                    <div class="hoverimg">
                        <ul>
                            <li id="img7"><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
                            <li id="img8"><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
                            <li id="img9"><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
                            <li id="img10"><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
                            <li id="img11"><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
                            <li id="img12"><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Update 2: In your case you can hide a specific parent’s child by using parentsuntil. Have a look at the updated answer.

Question 2

You have select the specific li elements with the selector –

$('.listWrap ul li:eq(0)').addClass('active'); // add class on page load to the first linnk
$('.hoverimg ul li:eq(0)').show(); // show the first image li on page load
$(".listWrap ul li").hover(
  function() {
    $(this).closest('.listWrap').find('ul li').removeClass('active'); // remove class all of the link li elements
    const $hoverImage = $(this).closest('.row').find('.hoverimg')
    $hoverImage.find('ul li').hide();
    $(this).addClass('active'); // add the class to the current element
    var idx = $(this).index() - 1;
    $hoverImage.find('ul li:eq(' + idx + ')').show(); // show the respective image li element
  }
);

.listWrap li.active a {
  color: #f00;
}

.hoverimg li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<section class="">
  <div class="container-fluid">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap">
          <ul>
            <li><a href="javascript:void(0);">qwerqwer</a></li>
            <li><a href="javascript:void(0);">tyuityui</a></li>
            <li><a href="javascript:void(0);">opoiuiop</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
            <li><a href="javascript:void(0);">zxcmnbv</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
          </ul>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap position-relative">
          <div class="hoverimg">
            <ul>
              <li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="mt-5 pt-5">
  <div class="container-fluid">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap">
          <ul>
            <li><a href="javascript:void(0);">qwerqwer</a></li>
            <li><a href="javascript:void(0);">tyuityui</a></li>
            <li><a href="javascript:void(0);">opoiuiop</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
            <li><a href="javascript:void(0);">zxcmnbv</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
          </ul>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap position-relative">
          <div class="hoverimg">
            <ul>
              <li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Question 3

CSS isn’t going to be able to call other elements like that, you’ll need to use JavaScript to reach beyond a child or sibling selector.

You could try something like this:

<a>Some Link
<div><img src="/you/image" /></div>
</a>

then…

a>div { display: none; }
a:hover>div { display: block; }

Question 4

A few days ago, I asked same question here. I have to show the respective image when hover or click on the anchor tag and It’s solved my issue.

Now, I am getting one more issue in this script. If I use same code one time then there is no issue but If I use same code twice or more then 2-3 times then I am getting the issues. I mean my code is not working properly.

$('.listWrap ul li:eq(0)').addClass('active'); // add class on page load to the first linnk
$('.hoverimg ul li:eq(0)').show(); // show the first image li on page load
$(".listWrap ul li").hover(
  function() {
    $('.listWrap ul li').removeClass('active'); // remove class all of the link li elements
    $('.hoverimg ul li').hide(); // hide all image li elements
    $(this).addClass('active'); // add the class to the current element
    var idx = $(this).index() - 1;
    $('.hoverimg ul li:eq(' + idx + ')').show(); // show the respective image li element
  }
);

.listWrap li.active a {
  color: #f00;
}

.hoverimg li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<section class="">
  <div class="container-fluid">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap">
          <ul>
            <li><a href="javascript:void(0);">qwerqwer</a></li>
            <li><a href="javascript:void(0);">tyuityui</a></li>
            <li><a href="javascript:void(0);">opoiuiop</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
            <li><a href="javascript:void(0);">zxcmnbv</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
          </ul>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap position-relative">
          <div class="hoverimg">
            <ul>
              <li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="mt-5 pt-5">
  <div class="container-fluid">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap">
          <ul>
            <li><a href="javascript:void(0);">qwerqwer</a></li>
            <li><a href="javascript:void(0);">tyuityui</a></li>
            <li><a href="javascript:void(0);">opoiuiop</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
            <li><a href="javascript:void(0);">zxcmnbv</a></li>
            <li><a href="javascript:void(0);">mnbvzxcv</a></li>
          </ul>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="listWrap position-relative">
          <div class="hoverimg">
            <ul>
              <li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
              <li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Bollate

[ANSWERED] javascript – On hover and click to display the image

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Ken Y-N

Comment posted by user9437856

Comment posted by user9437856

Comment posted by Shahnawaz Hossan

Comment posted by user9437856

Comment posted by Shahnawaz Hossan

Comment posted by user9437856

Comment posted by user9437856

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate