Question

<div id="div_name">
<ul>
<li><img src="" /> <div class="hidden_area"></div></li>
<li><img src="" /> <div class="hidden_area">Lorem Ipsum</div></li>
<li><img src="" /> <div class="hidden_area">Lorem Ipsum</div></li>
</ul>
</div>

在主css中，没有出现.hidden_area我使用overflow：hidden 但我希望当鼠标悬停使.hidden_area可见时，以及position: absolute;

的所有内容

这张图片解释了我想要的东西 http://filaty.com/i/alpha/06/06b6537a389323792ffa483e07167105

我尝试添加位置：相对;到<li>并将position :absolute;添加到.hidden_area并更改.hidden_area的顶部值，但它不起作用：（

这是一个例子： http://jsfiddle.net/qaYG5/

抱歉英语不好：）

Answer 1

如果我理解你，你需要一个简单的悬停所以...试试这个。这是一个FIDDLE

#div_name {
  width: 630px;
  height: 200px;
  margin: 20px auto;
  border: 1px solid #999;
}
ul li {
  background: #252525;
  list-style: none;
  float: left;
  width: 170px;
  height: 170px;
  margin: 10px 15px 10px 15px;
  padding: 5px;
  font-family: Verdana;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
}
.hidden_area {
  background: #892b2b;
  position: absolute;
  display: none;
  width: 170px;
  height: 130px;
  margin-top: 157px;
  margin-left: -5px;
  padding: 5px;
  text-align: center;
}
ul li:hover .hidden_area {
  display: block;
}

Answer 2

这是我建造的东西。不准确。因为我不知道你在CSS中做了什么，但这应该有所帮助，并让你知道如何做到这一点。

Fiddle link

ul li {
   height: 100px;
   width:100px;
   background: red;
   margin: 10px;
   padding: 5px;
   list-style: none outside none;
   float:left;
}
div.hidden_area{
    display:none;
}

ul li:hover > .hidden_area{
   display:block;
   margin:80px 0 0 0;
   width:105px;
   height: 200px;
   background: black;
   color:blue;
   overflow:auto;
   z-index: 100;
}

.clear{
    clear:both;
    width:500px;
    height: 200px;
    border: 1px solid #000000;
}

Answer 3

这是小提琴： http://jsfiddle.net/MfegM/1169/

你的内部有UL和3 LI吗？

当用户悬停时你想要那个

使用jQuery UI Tabs（）：

HTML：

<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="content">
        <div id="tabs-1">content 1.</div>
        <div id="tabs-2">content 2.</div>
        <div id="tabs-3">content 3.</div>
    </div>
</div>

JQUERY：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="JQUERY_UI"></script> //Find it at http://jqueryui.com/download/

<script>
$(function() {
    $( "#tabs" ).tabs();

    // Hover states on the static widgets
    $( "#dialog-link, #icons li" ).hover(
        function() {
            $( this ).addClass( "ui-state-hover" );
        },
        function() {
            $( this ).removeClass( "ui-state-hover" );
        }
    );
});
</script>

CSS：您将在jquery.ui下载中收到完整的file.css。或者使用它：

.ui-tabs {
    position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

#content {
    clear: both;
    margin-top: 15px;
}

Answer 4

使用:hover伪类更改display的{{1}}属性。在.hidden_area类上设置位置：绝对，并使用.hidden_area属性对其进行定位。

top

JSFIDDLE

编辑：这是使用你的JSFiddle：Your JSFiddle

删除.hidden_area{ position:absolute; top:200px; // the height of your <li> display:none; } li:hover .hidden_area{ display:block; }，它隐藏了您的overflow:hidden div。相反，请隐藏.hidden_area并显示：无并使用display显示：阻止（使用* li：hover .hidden_area *）

鼠标悬停时如何使li出现一些内容

4 个答案: