javascript - 如果另一个元素高于特定高度，则显示一个元素

Question

我有以下 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/

Answer 1

如果更改标记是可以接受的，则有可能在不使用 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功能。