时间戳

首页 > 解决方案 > 鼠标悬停时如何更改 li 图像，我使用 .load 检索图像

jquery - 鼠标悬停时如何更改 li 图像，我使用 .load 检索图像

问题描述

使用 悬停时如何交换 li 图像.load，我的代码仅显示 image1。

我想要实现的是，每当我将鼠标悬停在 image2 上时；image2 将出现在占位符中，悬停到 image3；将出现图 3.......

$(document).ready(function() {
  $(".result").mouseover(function() {
    $(".cardPlaceholder").load('/image1.html .CLASS ELEMENT').show();
    $(".cardholder").hide();
  }).mouseout(function() {
    $(".cardPlaceholder>img").attr('src', 'placeholder image.jpg').show();
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image12.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder image.jpg" alt="">
</div>

标签： jquery

解决方案

干得好。

  1. 在悬停时创建图像标签。
  2. 使用 查找您的图片网址next。$(this).next('.imgAlt').attr("src");.
  3. 给图像上的欲望课你想要什么。img.className = "CLASS ELEMENT"
  4. 用新图像替换您的默认图像。$('.cardPlaceholder').html(img);
  5. 定义默认图像并在鼠标移出时分配。$(".cardPlaceholder").html(defaultimage);

$(document).ready(function() {
  let defaultimage = `<img class="cardholder" src="placeholder image.jpg" alt="defaultImage">`;
  var img = new Image();
  $(".result").on("mouseover", function() {
    let url = $(this).next('.imgAlt').attr("src");
    img.src = url;
    img.className = "CLASS ELEMENT"
    $('.cardPlaceholder').html(img);

  }).mouseout(function() {
    $(".cardPlaceholder").html(defaultimage);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image2.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder-image.jpg" alt="defaultImage">
</div>

或者

  1. 仅将图像 src 和 alt 文本从cardholder.
  2. 从 mouseover / mouseout 添加或删除类。

$(document).ready(function() {
  let defaulturl = "placeholder-image.jpg";
  $(".result").on("mouseover", function() {
    let url = $(this).next('.imgAlt').attr("src");
    let alt = $(this).next('.imgAlt').attr("alt");
    $('.cardholder').attr("src", url).attr("alt", url);
    $('.cardholder').addClass("CLASS ELEMENT");

  }).mouseout(function() {
    $('.cardholder').attr("src", defaulturl).attr("alt", "default image");
    $('.cardholder').removeClass("CLASS ELEMENT");
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image2.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder-image.jpg" alt="default image">
</div>

推荐阅读