javascript - 未占用空间中的额外元素选择框(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 */
}

笨蛋:https://plnkr.co/edit/sRZWpsQ1DmBoKKwSiGBS?p=preview