Javascript css打开缩略图上的详细信息框悬停或单击

我已经找了一段时间了，但找不到我要找的东西。想象一行水平的缩略图：如果用户悬停或单击其中一个缩略图，则在缩略图上方会打开一个页面范围的div，以显示所选项目的较大图像和/或文本详细信息。如果用户退出悬停或在thumbs行之外单击，则“详细信息”框将消失。以下是整体概念的图像：

我得到的代码如下：

<style>
.item_container{float:left;  padding-left: 5px;}
.item_details {border:1px solid #000000;}
.hidden>div {
    display:none;
}

.visible>div {
    display:block;
}

</style>
<script src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.item_container').addClass("hidden");

    $('.item_container').hover(function() {
        var $this = $(this);

        if ($this.hasClass("hidden")) {
            $(this).removeClass("hidden").addClass("visible");

        } else {
            $(this).removeClass("visible").addClass("hidden");
        }
    });
});
</script>

<div class="item_container">
         <div class="item_details">
<img src="images/item/One.jpg" `height="300px" id="pic" />Details for item One </div> <!--div that we want to hide-->` 


        <h3>One</h3>
</div><!--end div_item_container-->
<div class="item_container">
         <div class="item_details">
<img src="images/item/Two.jpg" height="300px"  id="pic" />Details for item Two</div> <!--div that we want to hide-->  
        <h3>Two</h3>
</div><!--end div_item_container-->

.item_容器{float:left；padding left:5px；}
.item_详细信息{边框：1px实心#000000；}
.hidden>div{
显示：无；
}
.visible>div{
显示：块；
}
$（文档）.ready（函数（）{
$（'.item_container'）.addClass（“隐藏”）；
$（'.item_container'）。悬停（函数（）{
var$this=$（this）；
if（$this.hasClass（“隐藏”））{
$（this.removeClass（“隐藏”）.addClass（“可见”）；
}否则{
$（this）.removeClass（“可见”）.addClass（“隐藏”）；
}
});
});
第一项的详细信息`
一个
第二项的详情
两个

问题是item_details div在thumb/button div中打开，而不是在整行上方的大框中打开。我怀疑这将涉及对每个item div使用不同的ID（这很好……但我还不知道如何做到这一点）

---

谢谢你的建议

您可以使用属性和传递值来更新要显示的信息，例如：

HTML

JavaScript

如果您想在单击事件上运行它，您可以使用如下内容：

#displayArea { max-height: 50px; height: 50px; border; 1px solid #000; }

---

您可以在这里看到一个例子：

如果您对CSS版本和

li

项和

图
/
figcaption
的使用感兴趣


HTML中的
选项卡索引
：CSS中的焦点
和
：悬停

padding
对于图像+描述的房间，
flex
可以轻松地展开物品



.item\u容器ul{
宽度：640px；
填充：500px 10px 10px；
边框：实心；
保证金：0；
显示器：flex；
位置：相对位置；
/*可怕的化妆*/
背景：线性梯度（底部，rgba（0,0,0,0.2）50%，rgba（0,0,0,0.3）50%）不重复10px 10px，线性梯度（右侧，rgba（0,0,0,0.2）50%，透明50%）不重复10px 10px绿松石；
背景尺寸：640px 480px；
}
.物品(集装箱){
边缘：1米；
}
身材{
位置：绝对位置；
显示：无；
顶部：10px；
左：10px；
;
溢出：隐藏；
保证金：0；
}
李{
弹性：1；
显示：内联块；
保证金：0；
填充：0；
文本对齐：居中；
盒影：插入0 0 2px，0 0 1px白色；
}
li>img{
保证金：5px0；
}
李:悬停图,，
李：焦点人物{
显示：块；
}
李：焦点{
指针事件：无；
背景：白色；
}
菲卡普顿{
位置：绝对位置；
底部：0；
左：0；
右：0；
盒影：0 3px；
线高：2米；
填充：1em；
背景：rgba（255,255,255,0.5）；
}
/*在其他地方设置描述*/
李：第n个孩子（奇数）figcaption{
排名：0；
底部：0；
左：50%；
底部：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
图img{
显示：块；
}



项目1
项目说明


项目2
项目说明


项目3
项目说明


项目4
项目说明


项目5
项目说明


项目6
项目说明


项目7
项目说明


项目8
项目说明

我在这里举了一个例子：

建议您使用缩略图和信息标签，如：

$(document).ready(function(){
    $('.item').hover(function() {
        $('#displayArea img').attr('src',$(this).attr('data-img'));
        $('#displayArea .details').html($(this).attr('data-title'));
        $('#displayArea img').show();
        $('#displayArea .details').show();
    }, function() {
        $('#displayArea img').hide();
        $('#displayArea .details').hide();
    });

});

很抱歉解释得不好，但请检查小提琴以全面了解：


您可以单击以查看/取消查看信息
将鼠标悬停在上方可以查看信息
悬停在远处隐藏信息
我对上面的代码做了一个代码笔：是的。这是在正确的轨道上。我将尝试使用您的代码一段时间，看看显示区域是否会完全消失和/或根据每个项目可用的可变内容量适当调整大小。@phc_joe这应该是east完成的，您可以添加一些CSS浮动和定位来更改定位。希望有帮助！这已经非常接近我所需要的了，但我认为悬停可能是一种不好的方式（一切都在反弹，随意移动打开/关闭）。可以将脚本修改为单击打开/关闭吗？@phc_-joe当然，只需使用单击事件而不是悬停事件。我用一个例子更新了答案。这很好，但它始终保持显示区域完全打开（如果没有单击任何项目，我希望它缩小，并允许访问者单击关闭的显示区域），并且似乎无法使显示区域适应可变大小的内容。由于我几乎不知道我在用CSS或JavaScript做什么，我总是喜欢用其中一种来减少我的困惑。这可能是我可以在其他地方使用的东西。谢谢@phc_joe如果它被defaut和下面的物品关闭和缩小，你可能会有一些有趣的神经质行为，除非我完全误解：）是的。我遇到过w
$(document).ready(function(){
    $('.item').hover(function() {
        $('#displayArea img').attr('src',$(this).attr('data-img'));
        $('#displayArea .details').html($(this).attr('data-title'));
        $('#displayArea img').show();
        $('#displayArea .details').show();
    }, function() {
        $('#displayArea img').hide();
        $('#displayArea .details').hide();
    });

});

$(document).ready(function(){
     $('.item').on('click',function() {
            $('#displayArea img').attr('src',$(this).attr('data-img'));
            $('#displayArea .details').html($(this).attr('data-title'));
     });
});

<div id="info1" class="info">Info 1.</div>
<div id="thumbnail1" class="thumb"> Thumb 1. </div>

$(".thumb").mouseenter(function() {
  var id = this.id.slice(this.id.length - 1, this.id.length);
  id = "#info" + id;
    $(".info").each(function() {
    $(this).hide();
  });
  $(id).show();
});