未占用空間中的額外元素選擇框（HTML/JS/CSS w/Angular.js）

Question

我有一些創建了 ng-repeat 的元素，當鼠標指針懸停在主 div 元素上時，這些元素會突出顯示，並且在單擊元素時會出現一個燈箱。 唯一的問題是每個元素的正下方有一些空間，雖然沒有直接接觸每個元素，如果我懸停光標會變成指針光標，如果我點擊燈箱就會出現。 此外，這會導致滾動條看起來好像那里確實有元素。 這是一張圖片：

由於光標沒有出現在屏幕截圖中，我不得不用油漆繪制它，為糟糕的藝術性感到抱歉。 如您所見，指針光標已出現，當我單擊該空白區域時，我得到：

這顯然不是預期的行為。 這是發生這種情況的選項卡的模板：

<div class="container-fluid col-md-12 learning-container" id="badge-popup-container">
        <!-- First Row -->
        <div class="row">
            <!-- Track Progress Display -->
            <div class="col-md-1"></div>
            <div class="col-md-4" id="track-progress-div">
            <h3 class="tile-header">Track - {{currentTrack}}</h3>
            <br>
            <span id="progress-text">Progress</span>
            <span id="progress-number-text"> {{trackProgress}}% </span>
            <md-progress-linear md-mode="determinate" value="{{trackProgress}}" id="track-progress-bar"></md-progress-linear>
        </div>

        <!-- Recent Badge Display -->
        <div class="col-md-7"></div>
    </div>

    <br>

    <!-- Second Row -->

    <div class="row">
        <!-- Your Badges --->
        <div class="col-md-1"></div>
        <div id="badges-div" class="col-md-10">
            <h3 class="tile-header" id="badge-display-title">Your Badges</h3>
            <div class="badges-table">
                <div ng-repeat="badge in earnedBadges" class="table-badge-div" ng-click="showBadge($event, badge)">

                    <img ng-src="images/{{badge.image}}" class="badge-card-image">
                    <div class="badge-card-bottom">
                        <p class="badge-card-title">{{badge.name}}</p>
                    </div>
                    <p class="badge-card-points"><b>{{badge.points}}</b></p>
                    <p class="badge-card-date"><b>{{badge.earnedDate}}</b></p>
                    <img src="images/all_white.png" class="badge-highlight-image">
                </div>
            </div>

            <div class="col-xs-1"></div>
        </div>

    </div>
</div>

將您的注意力轉移到第二行，也就是出現問題的地方。 請注意，有一個名為 all_white 的圖像，它是一張白色透明圖片，懸停時顯示在卡片上以突出顯示卡片。

瀏覽器是 chrome，如果這有區別的話。

為什么會出現這個錯誤的選擇框？ 我該怎么做才能擺脫它？

編輯：

CSS 根據要求。

編輯2：

哎呀，我一開始放錯了 CSS。 這里。

另外，當我檢查空白區域時，它指向 table-badge-div div。 所以這就是瀏覽器認為在空白空間中的元素。

th {
    height: 20px;
}

#new-badge-button {
    margin-top: 14px;
    color: #5998ff;
}

#track-progress-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 138px;
}

#recent-badge-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 138px;
    border-style: solid;
    border-color: #fced7e;
    border-width: medium;
    border-radius: 18px;
}

#recent-badge-img {
    padding: 0px;
    max-width: 65px;
    min-width: 55px;
}

#badge-description-text {
    margin-top: 1.2em;
    background: linear-gradient(to bottom left, #fcfdff, #f2f6fc);
    border-sizing: border-box;
    border-radius: 8px;
    height: 40px;
}

#recent-badge-header {
    margin-top: 18px;
}

#new-badge-button {
    width: 5px!important;
}


#completed-courses-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: rgba(80, 80, 80, .2);
    height: 400px;
}

#badges-div {
    box-sizing: border-box;
    background: linear-gradient(to bottom left, #adc9f7, #f2f6fc);
    height: 400px;
    padding: 0px;
}



#progress-text {
    color: rgba(50, 50, 50, .7);
}


.tile-header {
    font-family: "Times New Roman", Times, serif;
    color: rgba(25, 25, 25, .8);

}

#progress-number-text {
    position: absolute;
    right: 15px;
    color: rgba(50, 50, 50, .8);
}


/* Completed Table --- Shows recently completed courses*/
.completed-table tr, .completed-table td {
    box-sizing: border-box!important;
}


.completed-table {
    height: 300px;
    overflow-y: auto;
    background: linear-gradient(to top right, rgba(200, 200, 200, .2), rgba(150, 150, 150, .1));
}

.completed-odd {
    background-color: rgba(255, 255, 255, .2);
}


.badges-table {
    height: 300px;
    overflow-y: auto;
    padding: 0px;
    width: 100%;
    background: linear-gradient(to top right, rgba(200, 200, 200, .2), rgba(150, 150, 150, .1));
}

.badge-info-div {
    width: 100%;
}

.badge-img {
    min-width: 60px;
    width: 13%;
    padding-left: 2%;
}

.badge-name {
    min-width: 140px;
    width: 20%
}

.badge-earned {
    min-width: 95px;
    width: 20%;
}

.badge-description {
    padding-right: 30px;
    width: 35%;
    font-size: 12px;
}

.badge-points {
    width: 10%
}

.badges-odd {
    background-color: rgba(255, 255, 255, .2);
}

.badge-table-image {
    height: 58px;
}

.recently-completed-img {
    min-width: 60px;
    width: 13%;
    padding-left: 2%
}

.completed-table-image {
    height: 50px;
}

.recently-completed-name {
    width: 43%;
}

.recently-completed-date {
    width: 42%;
}

.learning-table-head {
    height: 20px!important;
    color: #164084;
}

.learning-table-head tr {
    height: 20px!important;
}

.learning-table-head td {
    height: 20px!important;
}

.learning-table-body td {
    height: 70px;
}

.table-badge-div {
    margin-top: 30px;
    margin-left: 30px;
    box-sizing: border-box;
    display: inline-block;
    width: 190px;
    height: 80%;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
    box-shadow: 7px 7px 5px 10px rgba(80, 95, 119, .4);
}

.table-badge-div:hover {
    cursor: pointer;
}


.badge-card-bottom {
    margin-top: 22px;
    width: 100%;
    height: 57px;
    padding: 0px;
    background-color: #efdc2b;
}

.badge-highlight-image {
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 301px;
}

.badge-highlight-image:hover {
    opacity: .2;
}

.badge-card-image {

    display: block;
    margin: auto;
    width: 70%;
    margin-top: 30px;
}

.badge-card-points {
    color: #fffdf4;
    position: relative;
    bottom: 238px;
    left: 5px;
}

.badge-card-title {
    font-family: Georgia, serif;
    font-size: 17px;
    text-align: center;
    padding-top: 16px;
    color: #827846;
}

.badge-card-date {
    position: relative;
    bottom: 108px;
    left: 103px;
    color: #aaaaaa;
}

/* ------ Badge Dialog --------*/

#badge-dialog {
    border-radius: 0px;
    height: 190px;
    width: 450px;
    background-color: #efdc2b;
    overflow: hidden;
}

#badge-dialog-div {
    height: 190px;
    overflow: hidden;
}

#badge-dialog-div:hover {
    cursor: initial;
}

#badge-dialog-image-div {
    width: 190px;
    height: 190px;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
}

#badge-dialog-image {
    width: 133px!important;
    height: 163px;
    display: block;
    margin: auto;
    width: 70%;
    padding-top: 30px;
}

#badge-dialog-description {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 250px;
    position: absolute;
    top: 50px;
    left: 205px;
    font-size: 16px;
}

#badge-dialog-title {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-align: left;
    top: 0px;
    left: 205px;
    color: #fffdf4;
}

#badge-dialog-points-title {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #fffdf4;
    left: 210px;
    top: 100px;
}

#badge-dialog-points {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    left: 213px;
    top: 140px;
}

#badge-dialog-earned {
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    top: 140px;
    left: 301px;
}

#badge-dialog-earned-title{
    position: absolute;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #fffdf4;
    top: 100px;
    left: 300px;
}

/* ------ Media Querys ------- */

@media (max-width: 1158px) {
    #badge-description-text {
        font-size: 11px;
    }
}

Answer 1

似乎問題出在高亮圖像上，因為當我在其上設置display: none時，滾動條消失了。

作為解決方案，我在重復的 table-badge-div 元素上設置position:relative ，在透明高亮圖像上position:absolute和bottom:0px 。 現在應該可以正常工作了。

.table-badge-div {
    position:relative; /* Added this */
    margin-top: 30px;
    margin-left: 30px;
    box-sizing: border-box;
    display: inline-block;
    width: 190px;
    height: 80%;
    background: linear-gradient(to bottom left, #5b5b5b, #adadad);
    box-shadow: 7px 7px 5px 10px rgba(80, 95, 119, .4);
}

.badge-highlight-image {
    opacity: 0;
    position: absolute; /* Added this */
    width: 100%;
    height: 100%;
    bottom: 0px; /* Changed this */
}

Plunker： https ://plnkr.co/edit/sRZWpsQ1DmBoKKwSiGBS ? p = preview