Fond sautant

-1

Comment puis-je empêcher mon arrière-plan de sauter? Je veux avoir une ligne rouge à la fin de mes antécédents, mais quand je planerai sur l'article, il saute partout.Fond sautant

div { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    margin-left: 20px; 
 
    font-weight: 500; 
 
    color: white; 
 
    font-size: 20px; 
 
    line-height: 21px; 
 
} 
 

 
.big-column { 
 
    height: 396px; 
 
    width: 311px; 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    background-image: url("https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"); 
 
} 
 

 
.big-column:hover { 
 
    border-bottom: 5px solid #e60000; 
 
    text-decoration: underline; 
 
    color: white; 
 
}

<article class="big-column big-column-1"> 
 
    <div class="column-description"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
 
    </div> 
 
</article>

Source

2017-10-20 Djaangoo

Inclure la frontière .big-column et définir sa couleur à transparent. Sur :hover vous pouvez ensuite changer la couleur à ce que vous voulez.

div { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    margin-left: 20px; 
 
    font-weight: 500; 
 
    color: white; 
 
    font-size: 20px; 
 
    line-height: 21px; 
 
} 
 

 
.big-column { 
 
    height: 396px; 
 
    width: 311px; 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    background-image: url("https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"); 
 
    border-bottom: 5px solid transparent; 
 
} 
 

 
.big-column:hover { 
 
    border-color: #e60000; 
 
    text-decoration: underline; 
 
    color: white; 
 
}

<article class="big-column big-column-1"> 
 
    <div class="column-description"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
 
    </div> 
 
</article>

Source

2017-10-20 11:54:19 sol

Merci: D je m'en souviendrai – Djaangoo

-1

i ajouté position: fixed; sur votre classe de fond, vérifiez-le. Je pense que cela devrait fonctionner!


 
    div{ 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    margin-left: 20px; 
 
    font-weight: 500; 
 
    color: white; 
 
    font-size: 20px; 
 
    line-height: 21px; 
 
    } 
 

 
.big-column { 
 
    height: 396px; 
 
    width: 311px; 
 
    position: fixed; 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    background-image: url("https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"); 
 
} 
 
.big-column:hover { 
 
    border-bottom: 5px solid #e60000; 
 
    text-decoration: underline; 
 
    color: white; 
 
}

<article class="big-column big-column-1"> 
 
        <div class="column-description"> 
 

 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
 
        
 
        </div> 
 

 

 
      </article>

Source

2017-10-20 11:48:11 MultiDutch

Non, l'arrière-plan saute toujours lorsque vous passez sur l'article – Djaangoo

après avoir regardé dans votre code encore une fois, je vois theres un bord inférieur dans votre classe de vol stationnaire, pourriez-vous essayer de supprimer cela? – MultiDutch

changement border-bottom-box-shadow:

div{ 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    margin-left: 20px; 
 
    font-weight: 500; 
 
    color: white; 
 
    font-size: 20px; 
 
    line-height: 21px; 
 
} 
 

 
.big-column { 
 
    height: 396px; 
 
    width: 311px; 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    background-image: url("https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"); 
 
} 
 

 
.big-column:hover { 
 
    box-shadow: inset 0 -5px 0 #e60000; 
 
    text-decoration: underline; 
 
    color: white; 
 
}

<article class="big-column big-column-1"> 
 
    <div class="column-description"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
 
    </div> 
 
</article>

Source

2017-10-20 11:56:01

Tout ce que vous devez faire est de changer le box-sizing de votre .big-column classe content-box

Source

2017-10-20 11:56:19

Répondre

Questions connexes