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

Question

我已经搜索了一段时间，但无法完全找到我要找的东西。想象一下水平的一排缩略图：如果用户将鼠标悬停或单击其中一个，则会在缩略图上方打开一个全页 div 以显示诸如更大图像 and/or 的文本详细信息之类的内容选定的项目。如果用户退出悬停或在缩略图行外单击，详细信息框就会消失。这是整体概念图：

以下代码是我得到的：

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

感谢任何建议！

Answer 1

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

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

我这里举了个例子：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 以完整查看：

您可以点击view/unview信息。
将鼠标悬停在上方可以查看信息。
将鼠标悬停在远处会隐藏信息。

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

css to open details box on thumbnail hover or click

javascript

css

jquery

hover

visible