1. 首頁
  2. 問答
  3. CSS位置懸停時無法正常工作

CSS位置懸停時無法正常工作

2017-03-14 80 views
2

我嘗試在另一個div上使用position div。
當我徘徊在.lg-each-contest上時會出現.current-caption。 當盤旋在.time上時.current-caption懸停將相同。CSS位置懸停時無法正常工作

這裏是我的代碼

.lg-current-inner { 
 
    border: 1px solid #bdbdbd; 
 
    margin-bottom: 30px; 
 
    position: relative; 
 
} 
 

 
.lg-each-contest:hover .current-caption { 
 
    opacity: 1; 
 
} 
 

 
.lg-current-banner .amount { 
 
    position: absolute; 
 
    top: 5px; 
 
    background-color: #fea700; 
 
    padding: 5px 12px; 
 
    font-size: 22px; 
 
    right: 0; 
 
    font-weight: 600; 
 
    color: #fff; 
 
} 
 

 
.lg-current-content { 
 
    padding: 10px; 
 
} 
 

 
.lg-current-content h3 { 
 
    font-size: 24px; 
 
    line-height: 36px; 
 
    margin-top: 10px; 
 
} 
 

 
.time { 
 
    border-top: 1px solid #bdbdbd; 
 
    position: relative; 
 
} 
 

 
.time .remaning-time { 
 
    padding: 10px; 
 
} 
 

 
.time .remaning-time .each-time { 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.time .remaning-time .submissions { 
 
    padding: 2px 10px; 
 
    background: #1bcd80; 
 
    font-weight: 500; 
 
    color: #fff; 
 
    border-radius: 2px; 
 
} 
 

 
.current-caption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    cursor: pointer; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding: 25% 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(63, 97, 132, 0.5); 
 
    text-align: center; 
 
    font-size: 15px; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.4s ease-out; 
 
    -moz-transition: all 0.4s ease-out; 
 
    -o-transition: all 0.4s ease-out; 
 
    -ms-transition: all 0.4s ease-out; 
 
    transition: all 0.4s ease-out; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.current-caption button { 
 
    color: #fea700; 
 
    padding: 6px 20px; 
 
    opacity: 1; 
 
    border-radius: 4px; 
 
    background: #fff; 
 
    font-weight: 600; 
 
    font-size: 16px; 
 
    position: relative; 
 
    top: 50%; 
 
    outline-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button:hover { 
 
    border-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button:focus { 
 
    border-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button .fa { 
 
    margin-right: 5px; 
 
} 
 

 
.seclected { 
 
    display: none; 
 
}
<div class="lg-current-inner"> 
 
    <div class="lg-each-contest"> 
 
    <div class="lg-current-banner"> 
 
     <img src="assets/images/gl-1.jpg" alt="" class="img-responsive"> 
 
     <span class="amount">$130</span> 
 
    </div> 
 
    <div class="lg-current-content"> 
 
     <h3>Logo Name here</h3> 
 
     <p>We are looking for a clean logol company strickt.</p> 
 
    </div> 
 
    <div class="current-caption"> 
 
     <button class="select-btn"> 
 
      <span class="select">Select</span> 
 
      <span class="seclected select">Selected</span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
    <div class="time"> 
 
    <div class="remaning-time"> 
 
     <span class="each-time"> 25 Days 13 Hours 00 min</span> 
 
     <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span> 
 
    </div> 
 
    </div> 
 
</div>

檢查演示：http://codepen.io/anon/pen/MpoMad?editors=1100

在此先感謝。

來源

2017-03-14 Siful Islam

+4

'但是第二格的文字成了首位。這意味着什麼？ – Nitheesh

+2

那麼，你到底想達到什麼目的？ –

+0

爲什麼不添加'z-index：999;'到'.current-caption' – linktoahref

回答

2

我希望這是你在找什麼。爲你的div添加一個z-index，這將避免文本出現在懸停div上，以及填充似乎是不需要的，我也刪除了它。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<style> 
 
    .lg-current-inner { 
 
     border: 1px solid #bdbdbd; 
 
     margin-bottom: 30px; 
 
     position: relative; 
 
    } 
 
    
 
    .lg-each-contest { 
 
     overflow: hidden; 
 
     position: relative; 
 
    } 
 
    
 
    .lg-each-contest:hover .current-caption { 
 
     opacity: 1; 
 
    } 
 
    
 
    .lg-current-banner .amount { 
 
     position: absolute; 
 
     top: 5px; 
 
     background-color: #fea700; 
 
     padding: 5px 12px; 
 
     font-size: 22px; 
 
     right: 0; 
 
     font-weight: 600; 
 
     color: #fff; 
 
    } 
 
    
 
    .lg-current-content { 
 
     padding: 10px; 
 
    } 
 
    
 
    .lg-current-content h3 { 
 
     font-size: 24px; 
 
     line-height: 36px; 
 
     margin-top: 10px; 
 
    } 
 
    
 
    .time { 
 
     border-top: 1px solid #bdbdbd; 
 
     position: relative; 
 
    } 
 
    
 
    .time .remaning-time { 
 
     padding: 10px; 
 
    } 
 
    
 
    .time .remaning-time .each-time { 
 
     font-size: 14px; 
 
     font-weight: 500; 
 
    } 
 
    
 
    .time .remaning-time .submissions { 
 
     padding: 2px 10px; 
 
     background: #1bcd80; 
 
     font-weight: 500; 
 
     color: #fff; 
 
     border-radius: 2px; 
 
    } 
 
    
 
    .current-caption { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     cursor: pointer; 
 
     right: 0; 
 
     bottom: 0; 
 
     /*padding: 25% 0;*/ 
 
     z-index: 10000; 
 
     width: 100%; 
 
     height: 100%; 
 
     background-color: rgba(63, 97, 132, 0.5); 
 
     text-align: center; 
 
     font-size: 15px; 
 
     opacity: 0; 
 
     -webkit-transition: all 0.4s ease-out; 
 
     -moz-transition: all 0.4s ease-out; 
 
     -o-transition: all 0.4s ease-out; 
 
     -ms-transition: all 0.4s ease-out; 
 
     transition: all 0.4s ease-out; 
 
     -webkit-font-smoothing: antialiased; 
 
     -moz-osx-font-smoothing: grayscale; 
 
    } 
 
    
 
    .current-caption button { 
 
     color: #fea700; 
 
     padding: 6px 20px; 
 
     opacity: 1; 
 
     border-radius: 4px; 
 
     background: #fff; 
 
     font-weight: 600; 
 
     font-size: 16px; 
 
     position: relative; 
 
     top: 50%; 
 
     outline-color: transparent; 
 
     border: none; 
 
    } 
 
    
 
    .current-caption button:hover { 
 
     border-color: transparent; 
 
     border: none; 
 
    } 
 
    
 
    .current-caption button:focus { 
 
     border-color: transparent; 
 
     border: none; 
 
    } 
 
    
 
    .current-caption button .fa { 
 
     margin-right: 5px; 
 
    } 
 
    
 
    .seclected { 
 
     display: none; 
 
    } 
 
</style> 
 
</head> 
 

 
<body> 
 
<div class="col-sm-3 wow fadeInRight" data-wow-delay="0.2s"> 
 
    <div class="lg-current-inner"> 
 
     <div class="lg-each-contest"> 
 
      <div class="lg-current-banner"> 
 
       <img src="assets/images/gl-1.jpg" alt="" class="img-responsive"> 
 
       <span class="amount">$130</span> 
 
      </div> 
 
      <div class="lg-current-content"> 
 
       <h3>Logo Name here</h3> 
 
       <p>We are looking for a clean logo that pops apparel company strickt.</p> 
 
      </div> 
 
      <div class="current-caption"> 
 
       <button class="select-btn"> 
 
        <span class="select">Select</span> 
 
        <span class="seclected select"><i class="fa fa-check-circle"></i>Selected</span> 
 
       </button> 
 
      </div> 
 
     </div> 
 
     <div class="time"> 
 
      <div class="remaning-time"> 
 
       <span class="each-time"><i class="fa fa-calendar"></i> 25 Days 13 Hours 00 min</span> 
 
       <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 

 
</html>

修改。

設置overflow: hidden和position: relative爲lg-each-contest類。這將停止懸停div的溢出。我已經更新了代碼。

來源

2017-03-14 04:59:08 Nitheesh

+0

謝謝，但對不起，當我hhover'。時間'懸停工作。 –

+0

@SifulIslam我已更新代碼 – Nitheesh

+0

謝謝。但懸停'。時間'也將'絕對'。 –

0

我不知道你在問什麼。但是當我運行代碼時，我看到光標沒有顯示按鈕上的指針。我只是將一些代碼添加到您的CSS文件中。

.current-caption button { 
    + cursor: pointer; 
} 

.current-caption button:hover { 
    + background: #000; 
}

來源

2017-03-14 05:15:38 Dulshan

0

.current-caption必須在最前面，而.lg-each-contest只徘徊

.lg-current-inner { 
 
    border: 1px solid #bdbdbd; 
 
    margin-bottom: 30px; 
 
    position: relative; 
 
} 
 

 
.lg-each-contest:hover .current-caption { 
 
    opacity: 1; 
 
    z-index:2; /* added */ 
 
} 
 

 
.lg-current-banner .amount { 
 
    position: absolute; 
 
    top: 5px; 
 
    background-color: #fea700; 
 
    padding: 5px 12px; 
 
    font-size: 22px; 
 
    right: 0; 
 
    font-weight: 600; 
 
    color: #fff; 
 
} 
 

 
.lg-current-content { 
 
    padding: 10px; 
 
} 
 

 
.lg-current-content h3 { 
 
    font-size: 24px; 
 
    line-height: 36px; 
 
    margin-top: 10px; 
 
} 
 

 
.time { 
 
    border-top: 1px solid #bdbdbd; 
 
    position: relative; 
 
} 
 

 
.time .remaning-time { 
 
    padding: 10px; 
 
} 
 

 
.time .remaning-time .each-time { 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 

 
.time .remaning-time .submissions { 
 
    padding: 2px 10px; 
 
    background: #1bcd80; 
 
    font-weight: 500; 
 
    color: #fff; 
 
    border-radius: 2px; 
 
} 
 

 
.current-caption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    cursor: pointer; 
 
    right: 0; 
 
    bottom: 0; 
 
    /*padding: 25% 0;*/ /* removed */ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(63, 97, 132, 0.5); 
 
    text-align: center; 
 
    font-size: 15px; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.4s ease-out; 
 
    -moz-transition: all 0.4s ease-out; 
 
    -o-transition: all 0.4s ease-out; 
 
    -ms-transition: all 0.4s ease-out; 
 
    transition: all 0.4s ease-out; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.current-caption button { 
 
    color: #fea700; 
 
    padding: 6px 20px; 
 
    opacity: 1; 
 
    border-radius: 4px; 
 
    background: #fff; 
 
    font-weight: 600; 
 
    font-size: 16px; 
 
    position: relative; 
 
    top: 50%; 
 
    outline-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button:hover { 
 
    border-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button:focus { 
 
    border-color: transparent; 
 
    border: none; 
 
} 
 

 
.current-caption button .fa { 
 
    margin-right: 5px; 
 
} 
 

 
.seclected { 
 
    display: none; 
 
}
<div class="lg-current-inner"> 
 
    <div class="lg-each-contest"> 
 
    <div class="lg-current-banner"> 
 
     <img src="assets/images/gl-1.jpg" alt="" class="img-responsive"> 
 
     <span class="amount">$130</span> 
 
    </div> 
 
    <div class="lg-current-content"> 
 
     <h3>Logo Name here</h3> 
 
     <p>We are looking for a clean logol company strickt.</p> 
 
    </div> 
 
    <div class="current-caption"> 
 
     <button class="select-btn"> 
 
      <span class="select">Select</span> 
 
      <span class="seclected select">Selected</span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
    <div class="time"> 
 
    <div class="remaning-time"> 
 
     <span class="each-time"> 25 Days 13 Hours 00 min</span> 
 
     <span class="pull-right submissions" data-toggle="tooltip" data-placement="top" title="Submissions" data-toggle="tooltip" data-placement="top" title="Submissions">344</span> 
 
    </div> 
 
    </div> 
 
</div>

這裏剛剛添加的z-index

.lg-each-contest:hover .current-caption { 
    ++ z-index:2; 
}

去除填充，以適應集裝箱

.current-caption { 
    -- padding: 25% 0; 
}

來源

2017-03-14 06:36:49 Amigoz

相關問題

 相關問題