Question

我试图找出创建一个在我家前面出现的活动而不打开新页面。由于缺乏更好的词，它会扩展以填充浏览器。我知道我必须使用z-index和javascript做一些工作。月份将悬停，然后用户点击查看事件。

我的HTML

<div class= "month sep_box">
    <h1 class= "sep">SEP</h1>
    <div class= "year">2016</div>
</div>

CSS

.sep_box{
    background-image: url("images/design_disrupt.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    background-position: center;
    float: left;
    width: 25%;
    height: 25vh;
    transition:.25s ease;
}

编辑：屏幕截图的HTML现已复制

    <article> 
<div><h1 id="design_disruptors">
    DESIGN <br />DISRUPTORS</h1></div>
    <div><p class="child_day">THURSDAY</p></div>
    <div><p class="child_day_number">15</p></div>
    <div><p class="child_event_about">JCM 2121<br />7:00pm</p></div>
    <div><p class="child_rsvp">RSVP</p></div>
    <div><p class="child_desc">Design Disruptors reveals<br /> 
                               a never-before-seen<br /> 
                               perspective on the design approaches of these<br /> 
                               companies and how they<br />
                               are overtaking billion dollar industries though design.</p>
</div>
</article>

https://jsfiddle.net/es60r7cv/

Answer 1

由于字符限制，评论在这一点上不起作用，所以我将尽力在这里给你一些提示。我有点不确定你到目前为止在你的发展中有多远，以及设计的意图，但让我们试一试。

首先，如果我正确理解您的设计图像，您几乎希望整个屏幕看起来不同，除了点击的方形。这将很困难，因为您需要在中中放置许多元素，这样您就可以在中完全找到正确的位置。鉴于你的设计，以及像素完美对于它的工作有多重要，以及你在开发中的位置，我想知道简单地修复整个设计的宽度是否理想（没有增长或缩小用屏幕）。

我还建议您在此项目中使用jQuery，因为它会更方便。

要使用jQuery向所有月份框添加事件侦听器，您可以编写它：

$(document).on('click', '.month', function (evt) {
    // your event handling code here
}

我会为每个月元素指定它所代表的月份的ID，然后创建具有类似ID的叠加层。因此，例如，12月份的广告素材框格为<div class="month" id="december"></div>，该月份的叠加层可能为<div class="overlay" id="decemberOverlay"></div>。这样你就可以通过获取点击的月份框ID来定位它，并通过执行id +“Overlay”来获取叠加层。

你可以使用AJAX即时获取你的叠加内容，但为了减少你自己的复杂性，你可能总是将所有叠加加载到页面并用CSS隐藏它们，但也包括定位代码：

.overlay {
    display: none;
    z-index: 10;
    position: absolute; /* this will position it to the document, or the first parent that is relatively or absolutely positioned */
    top: 0;
    left: 0
}

我们正在使用绝对定位，因为：

我们希望能够将叠加层直接放在原始图像上，而不会影响文档其余部分的流量，并且
z-index需要应用一些非静态position值

然后，在你的脚本中，你会更新它是这样的：

$(document).on('click', '.month', function (evt) {
    var clickedMonth = this.id;
    var correspondingOverlay = $(clickedMonth+"Overlay");
    correspondingOverlay.show();
}

根据你的小提琴和代码，我想也许你还不是很远。希望这能为您提供一些如何实现理想结果的先机。

编辑：最后一件事 - 这是一种更清晰的标记样式：

<article> 
    <div>
        <h1 id="design_disruptors">DESIGN <br />DISRUPTORS</h1>
    </div>
    <div>
        <p class="child_day">THURSDAY</p>
    </div>
    <div>
        <p class="child_day_number">15</p>
    </div>
    <div>
        <p class="child_event_about">JCM 2121<br />7:00pm</p>
    </div>
    <div>
        <p class="child_rsvp">RSVP</p>
    </div>
    <div>
        <p class="child_desc">
            Design Disruptors reveals<br /> 
            a never-before-seen<br /> 
            perspective on the design approaches of these<br /> 
            companies and how they<br />
            are overtaking billion dollar industries though design.
        </p>
    </div>
</article>

清晰的HTML将更容易阅读，更容易发现错误。

Z-index和堆叠

1 个答案: