更改懸停時顯示的影像并單擊

我不是開發人員。然而，我的任務是為一個使用 jQuery 的小專案提出解決方案，但我不知道從哪里開始。這是我的代碼筆：https ://codepen.io/axo1/pen/mdBLRjL

我需要的是這個（所有圖形和文本都是占位符）：

我設法實作的目標

1. 影像item1應該是第一個可見的，
2. 將滑鼠懸停在圖形下方的按鈕上會更改顯示的影像，

我不知道如何實作

3. 下面的按鈕應該是可點擊的。單擊按鈕會更改上面的“活動”圖形。例如：如果我點擊Second item按鈕，item2即使我取消懸停按鈕，影像也會顯示，依此類推。

我應該研究什么的任何提示？

不幸的是，jQuery 在這里非常受歡迎。

$(document).on({
  mouseenter: function() {
    $(".item1").toggleClass("active hidden");
    $(".item2").toggleClass("hidden");
  },
  mouseleave: function() {
    $(".item1").toggleClass("active hidden");
    $(".item2").toggleClass("hidden");
  }
}, ".item2btn");

$(document).on({
  mouseenter: function() {
    $(".item1").toggleClass("active hidden");
    $(".item3").toggleClass("hidden");
  },
  mouseleave: function() {
    $(".item1").toggleClass("active hidden");
    $(".item3").toggleClass("hidden");
  }
}, ".item3btn");

img {
  max-width: 15%;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  visibility: hidden;
}

.active {
  visibility: visible;
}

#container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  position: absolute;
  top: 250px;
}

#container ul {
  padding: 1em;
}

#container ul>li {
  background: black;
  margin: 1em;
  padding: 1em;
  list-style-type: none;
  display: inline;
}

#container ul>li:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">

<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">

<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">

<div id="container">
  <ul>
    <li class="item1btn">First item</li>
    <li class="item2btn">Second item</li>
    <li class="item3btn">Third item</li>
  </ul>
</div>

uj5u.com熱心網友回復：

這是一個作業版本

我保留了你的風格 - 我認為它可以縮短為更干燥

const $images = $(".items")
let $currentItem = $(".items").eq(0)
$("#container li").on({
  "click": function() {
    const id = $(this).data("id").replace("btn", "");
    $images
      .removeClass("active")
      .addClass("hidden")
    $currentItem = $(`.${id}`)
      .removeClass("hidden")
      .addClass("active");
  },
  "mouseover": function() {
    const id = $(this).data("id").replace("btn", "");
    $images
      .removeClass("active")
      .addClass("hidden")
    $(`.${id}`)
      .removeClass("hidden")
      .addClass("active");
  },
  "mouseout": function() {
    $images
      .removeClass("active")
      .addClass("hidden")
    $currentItem
      .removeClass("hidden")
      .addClass("active");
  }
})

img {
  max-width: 15%;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  visibility: hidden;
}

.active {
  visibility: visible;
}

#container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  position: absolute;
  top: 250px;
}

#container ul {
  padding: 1em;
}

#container ul>li {
  background: black;
  margin: 1em;
  padding: 1em;
  list-style-type: none;
  display: inline;
}

#container ul>li:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<img src="https://www.models-resource.com/resources/big_icons/13/12406.png" class="active items item1">

<img src="https://banner2.cleanpng.com/20180410/rce/kisspng-the-legend-of-zelda-majora-s-mask-hyrule-warriors-the-legend-of-zelda-5acc7b7a4870f6.4303262815233503942967.jpg" class="hidden items item2">

<img src="https://i.pinimg.com/originals/4a/a5/df/4aa5df83115df6c96732a2d76ccb4f1b.jpg" class="hidden items item3">

<div id="container">
  <ul>
    <li data-id="item1">First item</li>
    <li data-id="item2">Second item</li>
    <li data-id="item3">Third item</li>
  </ul>
</div>

標籤：

上一篇：創建存盤參考以將影像上傳到GoogleFirebase

下一篇：HTML/CSS中的替換文本