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

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

感谢您的任何建议！

Answer 1

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

建议是您有缩略图和信息标签的地方，例如：

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

抱歉解释不好，但请检查 Fiddle 以完整查看：

• 您可以点击查看/取消查看信息。
• 悬停可查看信息。
• 悬停会隐藏信息。

Answer 2

如果您对 CSS 版本以及 li 项目和 figure/figcaption 的使用感到好奇。

---

tabindex 在 HTML + :focus 和 :hover 在 CSS 中。

padding为图片+描述的房间，flex方便传播物品。

---

.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;
}

<div class="item_container">
  <ul>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/1" alt="item 1" />Item 1
      <figure>
        <img src="http://lorempixel.com/640/480/nature/1" alt=" nature 1" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/2" alt="item 2" />Item 2
      <figure>
        <img src="http://lorempixel.com/640/480/nature/2" alt=" nature 2" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/3" alt="item 3" />Item 3
      <figure>
        <img src="http://lorempixel.com/640/480/nature/3" alt=" nature 3" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/4" alt="item 4" />Item 4
      <figure>
        <img src="http://lorempixel.com/640/480/nature/4" alt=" nature 4" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/5" alt="item 5" />Item 5
      <figure>
        <img src="http://lorempixel.com/640/480/nature/5" alt=" nature 5" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/6" alt="item 6" />Item 6
      <figure>
        <img src="http://lorempixel.com/640/480/nature/6" alt=" nature 6" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/7" alt="item 7" />Item 7
      <figure>
        <img src="http://lorempixel.com/640/480/nature/7" alt=" nature 7" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
    <li tabindex="0">
      <img src="http://lorempixel.com/75/75/nature/8" alt="item 8" />Item 8
      <figure>
        <img src="http://lorempixel.com/640/480/nature/8" alt=" nature 8" />
        <figcaption>
          items descriptions
        </figcaption>
      </figure>
    </li>
</div>
<!--end div_item_container-->

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

---

或 http://codepen.io/anon/pen/QyXeER?editors=1100（如果未悬停或单击两次则包装）

Answer 3

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

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/