HTML/CSS: Dish 的图像预览显示在同一位置，否则图像被隐藏答案

【问题标题】：HTML/CSS: Image Preview of Dish displayed in the same position, otherwise image is hiddenHTML/CSS: Dish 的图像预览显示在同一位置，否则图像被隐藏
【发布时间】：2016-01-25 09:24:39
【问题描述】：

假设我有一个项目列表

Item 1                 *****
Item 2                 *   *
Item 3                 *****

当我将鼠标悬停在这些相应的项目上时，我希望看到它们的所有图像都出现在同一位置（在本例中为星形框），否则它将有一个默认图像框。

我怎样才能做到这一点？我了解如何使图像出现在悬停时，但不了解如何具体定位它们。

谢谢！

【问题讨论】：

标签： html css image text

【解决方案1】：

你可以为你使用 JavaScript：

$('#list').each(function(){
  $(this).find('li').each(function(){
    $(this).hover(function(){
      var itemText = $(this).text();
      $('#imageBox img').attr('src', 'https://placehold.it/' + itemText);
    });
  });
});

#list, #imageBox{
 width: 45%;
 display: inline-block;
 vertical-align: middle;
 min-height: 200px;
 margin: 0;
}
#list{
  background-color: #cdcdcd;
}
#imageBox{
  background-color: #cdcdff;
}
#imageBox img{
 width: 350px;
 height: 150px;
 margin: 25px auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="list">
  <li>350x200</li>
  <li>300x250</li>
  <li>250x300</li>  
</ul>
<div id="imageBox">
  <img src="https://placehold.it/350x150">
</div>

【讨论】：

【解决方案2】：

非常不具体的问题，这里有3个链接，都需要Javascript，一个简单，一个有点难，最后一个让我很头疼。

#main{border:grey 3px solid;
box-shadow:#000 5px 6px 3px;margin:0 auto;display:block;}
.imgStyle{height:100px;width:100px;border:2px solid silver;
box-shadow: 4px 5px 2px #000;margin-right:10px;}
#container{width:500px;margin:20px auto;}

链接从最简单到最难

http://codepen.io/damianocel/pen/YyvqVJ

http://codepen.io/damianocel/pen/xwzZKb

http://codepen.io/damianocel/pen/gPggLB

【讨论】：