javascript - 将鼠标悬停在特定文本上并在 CSS 中显示图像

Question

我正在尝试为我的网页设计一个菜单。要创建响应式菜单，我需要一些属性来与基本逻辑进行交互。例如，左侧有四个文本[可悬停]，当悬停在它们上时，将在页面右侧显示图像。[这是显示图像的固定位置] 每个单独的文本显示不同的图像。当悬停在冰淇淋文本上时，它会显示冰淇淋图像，而将鼠标悬停在比萨文本上时，它会向用户显示比萨图像。（仅需要使用 HTML 和 CSS 的解决方案）。

Answer 1

您需要做的就是通过一些 id 或其他属性在您的项目和它的图像之间创建一个连接

$(document).ready(function() {
  $('.menu li').hover(function(){
    var setRelation = $(this).data('relation');
    var a = $('.content').find('#'+setRelation);
    $('.image').hide();
    a.show();
  });
});

section {display: flex;}
ul {
  width: 30%;
}
.content {
  width: 70%;
}
img {
  max-width: 100%;
}
.image {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<ul class="menu">
  <li data-relation="item1">Item 1</li>
  <li data-relation="item2">Item 2</li>
  <li data-relation="item3">Item 3</li>
  <li data-relation="item4">Item 4</li>
</ul>
<div class="content">
  <div id="item1" class="image">
    put your IMG here 1
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-homemade-pizza-horizontal-1542312378.png" alt="">
  </div>
  <div id="item2" class="image">
    put your IMG here 2
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Ice_Cream_dessert_02.jpg" alt="">
  </div>
  <div id="item3" class="image">
    put your IMG here 3
  </div>
  <div id="item4" class="image">
    put your IMG here 4
  </div>
</div>
</section>