我有以下 HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
事件容器中充满了未知数量的 .event
元素,如下所示:
<div class="event">{{event-name}}</div>
我想根据 .event-container
的高度是否超过 76px
(等于到四个 .event
元素堆叠的高度)。
上述元素的样式:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
.event-container
没有样式
我可以用 Javascript (jQuery) 做我想做的事:
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
每次进行更改时都运行它,但我宁愿使用 CSS。
这可能吗?也许使用伪元素或媒体查询之类的?
JSFIDDLE:http://jsfiddle.net/pitaj/LjLxuhx2/
最佳答案
如果更改标记是可以接受的,则有可能在不使用 JavaScript
的情况下实现外观相似的页面。显示或隐藏,这里是Fiddle
我已经删除了 <div class="more-events">more ...</div>
event
的线条和制作元素类在必要时隐藏 我还让它们在悬停在 more ...
上时出现.
我添加的CSS:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
对于 .event-box
我注释掉的类max-height: 76px;
因为在我的浏览器中 76px 不等于四个 .event
的高度元素堆叠。也删除了 update
功能。
关于javascript - 如果另一个元素高于特定高度,则显示一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26324033/