余分なスペースで余分な要素を選択するボックス（HTML/JS/CSS/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> 

問題が発生している2番目の行に注意を向けるようにしてください。 all_whiteと呼ばれる画像があります。これは白い透明な画像で、カードの上に表示され、カードを強調表示します。

ブラウザーはクロムで、違いがある場合はクロムです。

なぜこの誤った選択ボックスが表示されるのですか？それを取り除くために私は何ができますか？

編集：

CSS要求されるように。

編集2：私が最初に間違ったCSSを置く

おっと。ここに。

また、空白を調べると、table-badge-div divを指しています。それは、ブラウザが空の空間にあると考える要素です。問題は、私はそれにdisplay: noneを設定したとき以来、ハイライト映像だったよう

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

はそう、スクロールバー事が姿を消しました。

解決策として、私は透明なハイライトイメージ上のを繰り返しtable-badge-div要素に設定し、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