Question

我一直在寻找一段时间，但却无法找到我想要的东西。想象一个水平的缩略图行：如果用户要么悬停或点击其中一个缩略图，页面范围的div会在拇指线上方打开，以显示所选项目的较大图像和/或文本详细信息。如果用户退出悬停或点击拇指行外部，则详细信息框会消失。这是整体概念的图像：

以下代码就我所知：

<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_details在拇指/按钮div中打开，而不是在整行上方的大框中打开。我怀疑这将涉及为每个项目div使用一个不同的ID（这很好......但我还没有掌握如何做到这一点）。

感谢您的任何建议！

Answer 1

我在这里做了一个例子：https://jsfiddle.net/ne57366v/2/

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

[bca]

然后编码将它们两者联系起来：

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

对于不好的解释感到抱歉，但请检查小提琴是否完全看到它：

您可以点击查看/取消查看信息。
鼠标悬停可让您查看信息。
躲避隐藏信息。

Answer 2

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

HTML

<div id="displayArea">
<img />
<div class="details"></div>
</div>


<div class="items">
  <div class="item" data-img="one.jpg" data-title="Details for item 1">
    One
  </div>
  <div class="item" data-img="two.jpg" data-title="Details for item number two">
    Two
  </div>
<div>

</div>
</div>

CSS

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

的JavaScript

$(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'));
     });
});

您可以在此处查看示例：https://jsfiddle.net/9rhLd86j/

Answer 3

如果您对CSS版本以及使用my_class get_new_object(string s) { my_class c(s); return c; } int main() { // Sequence of events: // - get_new_object() called // - Inside get_new_object() "my_class c() instance created on stack and constructor called --> This is the first constructor call you see // - Inside get_new_object() "return c;" statement first creates a copy of 'c' and assigns to the my_class c in main() --> This is your second constructor call // - return c; initiates destruction of the my_class c which was created inside get_new_object() since it's on the stack and the function is going out of scope --> This is your first Destructor call // - main ends --> This is when the my_class c of main() goes out of scope and the destructor is called again. my_class c=get_new_object("A"); c=get_new_object("B"); }项和li / figure感到好奇。

HTML中的

figcaption + tabindex和:focus。

:hover用于图片+说明的房间，padding可以轻松传播商品。

＆＃13;

flex

＆＃13;

.item_container ul {
  width: 640px;
  padding: 500px 10px 10px;
  border: solid;
  margin: 0;
  display: flex;
  position: relative;
  /* scary makeup */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 50%) no-repeat 10px 10px, linear-gradient(to right, rgba(0, 0, 0, 0.2) 50%, transparent 50%) no-repeat 10px 10px turquoise;
  background-size: 640px 480px;
}
.item_container {
  margin: 1em;
}
figure {
  position: absolute;
  display: none;
  top: 10px;
  left: 10px;
  ;
  overflow: hidden;
  margin: 0;
}
li {
  flex: 1;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
  box-shadow: inset 0 0 0 2px, 0 0 0 1px white;
}
li > img {
  margin: 5px 0 0;
}
li:hover figure,
li:focus figure {
  display: block;
}
li:focus {
  pointer-events: none;
  background:white;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 3px;
  line-height: 2em;
  padding: 1em;
  background: rgba(255, 255, 255, 0.5);
}
/* set description else where ? */

li:nth-child(odd) figcaption {
  top: 0;
  bottom: 0;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure img {
  display: block;
}

＆＃13;

http://codepen.io/anon/pen/VeJJMK?editors=1100

或 http://codepen.io/anon/pen/QyXeER?editors=1100（如果未覆盖或点击两次，则包裹）

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

3 个答案: