我想知道是否可以更改使 div 遵循其表格单元格的大小?目前我只能在另一个 div 上方显示一些内容。这是我到目前为止所拥有的。
https://jsfiddle.net/amosangyongjian/mmqasf5t/54/
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});
最佳答案
td {
width:100px;
height:100px;
position:relative; /* ADD THIS */
}
.expand {
display: none;
position: absolute;
top: 0; left:0; width: 100%; height: 100%; /* ADD */
z-index: 1;
background: red;
/*height: auto; width: 100%; REMOVE */
overflow: hidden;
}
.static {
position: absolute;
z-index: 0;
background: yellow;
text-align: center;
}
这是一个更简洁的解决方案,对 HTML、CSS、jQuery 进行了一些细微的更改
jQuery(function( $ ) {
$("td").hover(function() {
$(this).find(".expand").stop().slideToggle("slow");
});
});
td {
width:100px;
height:100px;
position:relative;
}
.expand {
display:none;
position:absolute;
top:0; left:0; width:100%; height:100%;
background:red;
overflow:hidden;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>
这是另一个完全不使用 JavaScript
的示例
但是 CSS3 transition
从 height:0;
到 height:100%;
td {
width:100px;
height:100px;
position:relative;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
.expand {
position:absolute;
overflow:hidden;
top:0; left:0; width:100%; height:0;
background:red;
transition: 0.5s;
}
td:hover .expand{
height:100%;
}
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>
关于javascript - jquery背景下滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39112845/