jquery - 扩展CSS中的边框而无需向下推其他元素

http://adamginther.com/timeline.php

出于投资目的，我试图为我的行业历史创建时间表。

卡皮拉诺大学的蓝线将其他元素推到悬停时，有没有办法使它从底部延伸到顶部？我尝试过的位置：绝对；但这没做任何事情。

的HTML

<div id="timeline-wrapper">
        <div id="timeline">
            <span class="circle"></span>
                <span class="timeline-element" id="capu">
                    <h1>Capilano University</h1>
                    <p>September 2012 - April 2014</p>
                </span>

                <span class="timeline-element bottom" id="spud">
                    <p class="work-description">I worked underneath the Senior VP of Customer Experience, along with the Lead Designer and the Lead Storyteller to help re-build the SPUD brand via banners, landing pages, and newsletters. I also spent three months building a new marketing website from the ground up</p>
                    <h1>SPUD</h1>
                    <p>May 2013 - March 2014</p>
                </span>

                <span class="timeline-element bottom" id="pandg">
                    <p class="work-description">
                    Working under technical lead Chris Ng, the technologies I primarily used were HTML, CSS, JavaScript/jQuery, Git, and WordPress. Over the span of six weeks I built a WordPress plug-in for Leaflet, imported a blog for Vitala Foods, and created a fake kale store, and many other various bug fixes and small projects.</p>
                    <h1>Pound & Grain</h1>
                    <p>March 2014 - April 2014</p>
                </span>

                <span class="timeline-element bottom" id="relentless">
                    <p class="work-description">Relentless Technology is a small boutique agency in North Vancouver with clients such as Blast Radius, Wunderman, and Levi's. My primary role was to perform maintainence and bug fixes in WordPress, HTML, CSS, and JavaScript for their 300+ clients.</p>
                    <h1>Relentless Technology</h1>
                    <p>April 2014 - July 2014</p>
                </span>


            <span class="circle right"></span>
        </div>
    </div>

的CSS

#timeline {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 7px solid #25b67b;
    position: relative;
    transition: 0.2s;

}
.bordernone {
    border-bottom: 0 !important;
    transition: 1s;
}
#timeline-wrapper {
    position: relative;
    padding: 175px 0;
}
#timeline .circle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 7px solid #25b67b;
    background: white;
    display: inline-block;
    position: absolute;
    top: 85px;
    z-index: 1;
    transition: 0.2s;
    cursor: pointer;
}
#timeline .circle.right {
    right: 0;
}
#timeline .circle:hover {
    background: #25b67b;
}
#timeline .timeline-element {
    position: relative;
    cursor: pointer;
    display: inline-block;
}
#timeline .timeline-element.bottom {
    position: absolute;
    top: 110px;
}
#timeline .work-description {
    text-align: left !important;
    padding: 10px 20px;
    display: none;
    transition: 0.5s !important;
    position: relative;
    min-height: 150px;
}
#timeline #capu {
    border-bottom: #015289 5px solid;
    background: url(../img/arrow-capu.png) no-repeat center bottom;
    background-size: 35px;
    width: 66%;
    margin-left: 39px;
    cursor: pointer;
    transition: 0.2s;
}
#timeline #capu:hover {
    border-bottom: #015289 15px solid;
}
#timeline #spud {
    border-top: #efad36 5px solid;
    background: url(../img/arrow-spud.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 13%;
    transition: 0.1s;
}
#timeline #spud:hover {
    border-top: #efad36 10px solid;
}
#timeline #spud .work-description {
    background: #efad36;
}
#timeline #pandg {
    border-top: #ef4035 5px solid;
    background: url(../img/arrow-pandg.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 41%;
    transition: 0.1s;
}
#timeline #pandg .work-description {
    background: #ef4035;
}
#timeline #pandg:hover {
    border-top: #ef4035 10px solid;
}
#timeline #relentless {
    border-top: #f89728 5px solid;
    background: url(../img/arrow-relentless.png) no-repeat center top;
    background-size: 35px;
    width: 28%;
    position: absolute;
    left: 69%;
    transition: 0.1s;
}
#timeline #relentless:hover {
    border-top: #f89728 10px solid;
}
#timeline #relentless .work-description {
    background: #f89728;
}
#timeline .timeline-element h1 {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0;
    text-align: center;
}
#timeline .timeline-element p {
    text-align: center;
}

JS

$(document).ready(function() {
    $('html').click(function() {
        $('.work-description').hide();
    });
    $('#spud').click(function() {
        event.stopPropagation();
        $('#spud .work-description').show();
    });
    $('#pandg').click(function() {
        event.stopPropagation();
        $('#pandg .work-description').show();
    });
    $('#relentless').click(function() {
        event.stopPropagation();
        $('#relentless .work-description').show();
    });
    $('#capu').click(function() {
        event.stopPropagation();
        $('#capu .work-description').show();
    });

});

最佳答案

如果将框模型设置为border-box，这将使总体高度与边框，填充等的高度相同：

.borderBox {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

这将有效地“让这些东西在内部发生变化”。

这是一个小提琴：http://jsfiddle.net/X3duL/3/

这里有一个不错的摘要：

http://www.paulirish.com/2012/box-sizing-border-box-ftw/