悬停或单击以显示相应的图像 [英] On hover or click to display the respective image

查看：25
本文介绍了悬停或单击以显示相应的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个列表，当用户悬停或单击列表时，相应的图像将显示在右侧.

我使用下面的脚本从 li 标签中添加和删除活动类.

$(".listWrap ul li").hover(功能() {$(this).addClass('active');},功能() {if (!$(this).hasClass('clicked')) {$(this).removeClass('active');}});$(".listWrap ul li").click(function() {$(this).toggleClass('clicked');});

.listWrap li.active a {颜色:#f00；}.hoverimg li {位置:绝对；顶部:0；左:0；右:0；底部:0；}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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>

<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>

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

解决方案

您或许可以使用 hide()/show() 使用索引来隐藏显示图像:

$('.listWrap ul li:eq(0)').addClass('active');//在页面加载时将类添加到第一个链接$('.hoverimg ul li:eq(0)').show();//在页面加载时显示第一张图片 li$(".listWrap ul li").hover(功能() {$('.listWrap ul li').removeClass('active');//删除类中的所有链接 li 元素$('.hoverimg ul li').hide();//隐藏所有图像 li 元素$(this).addClass('active');//将类添加到当前元素var idx = $(this).index()-1;$('.hoverimg ul li:eq('+idx+')').show();//显示相应的图像 li 元素});

.listWrap li.active a {颜色:#f00；}.hoverimg li {位置:绝对；顶部:0；左:0；右:0；底部:0；}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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>

<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>

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

I have a list and when user hover or click on the list then respective image will display on right side.

Below script I am using for add and remove active class from li tags.

$(".listWrap ul li").hover(
  function() {
    $(this).addClass('active');
  },
  function() {
    if (!$(this).hasClass('clicked')) {
      $(this).removeClass('active');
    }
  }
);

$(".listWrap ul li").click(function() {
  $(this).toggleClass('clicked');
});

.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/bootstrap@5.0.0-beta1/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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

解决方案

You can probably use the index to hide show images using hide()/show():

$('.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/bootstrap@5.0.0-beta1/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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这篇关于悬停或单击以显示相应的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆