Position CSS ne fonctionne pas correctement sur le vol stationnaire

J'essaie de position div sur un autre div.
lorsque je passe la souris sur .lg-each-contest, le .current-caption apparaît. lorsque survoler sur .time le vol stationnaire .current-caption sera le même.Position CSS ne fonctionne pas correctement sur le vol stationnaire

Voici mon code

.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>

chèque demo: http://codepen.io/anon/pen/MpoMad?editors=1100

merci à l'avance.

Source

2017-03-14 Siful Islam

'mais le texte de 2ème div est devenu top.' Que cela veut-il dire? – Nitheesh

alors, que voulez-vous exactement? –

Pourquoi ne pas ajouter 'z-index: 999;' à '.current-caption' – linktoahref

J'espère que c'est ce que vous cherchez. Ajouter un z-index pour votre div cela permettra d'éviter que le texte d'apparaître sur la div hover, ainsi que le rembourrage semble être indésirable, j'ai supprimé cela aussi.

<!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>

Modifications.

Définissez overflow: hidden et position: relative pour la classe lg-each-contest. Cela arrêtera le débordement de la div stationnaire. J'ai mis à jour le code.

Source

2017-03-14 04:59:08 Nitheesh

Merci, mais désolé, quand je hhover sur '.time' le vol stationnaire fonctionne. –

@SifulIslam J'ai mis à jour le code – Nitheesh

merci. mais sur hover '.time' sera aussi' absolute'. –

Je n'ai aucune idée de ce que vous demandez. Mais quand je cours le code j'ai vu que le curseur ne montre pas le pointeur sur le bouton. Je viens d'ajouter du code à votre fichier CSS.

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

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

Source

2017-03-14 05:15:38 Dulshan

.current-caption doit être sur le dessus tout en .lg-each-contest est en vol stationnaire seulement

.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>

ici juste ajouté z-index

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

rembourrage enlevé pour adapter récipient

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

Source

2017-03-14 06:36:49 Amigoz

Position CSS ne fonctionne pas correctement sur le vol stationnaire

Répondre

Questions connexes