将鼠标悬停在特定文本上并在CSS中显示图像[关闭]

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

[<5天前关闭。

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9FVzFGWi5qcGcifQ==” alt =“在此处输入图像描述”>

Answer 1

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

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