跳躍背景

-1

如何防止我的背景跳躍？我想在我的背景結尾處有一條紅線，但當我懸停在文章上時，它正在跳來跳去。跳躍背景

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>

來源

2017-10-20 Djaangoo

包括上.big-column邊界，其顏色設置爲transparent。在:hover你可以改變顏色到你想要的。

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>

來源

2017-10-20 11:54:19 sol

謝謝：D我會記住這一點 – Djaangoo

-1

我添加位置是：固定;在你的背景課上，檢查一下。我認爲這應該工作！


 
    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>

來源

2017-10-20 11:48:11 MultiDutch

不能，當您再次查看您的代碼後，當您將鼠標懸停在文章 – Djaangoo

上時，背景仍然會跳躍，我在您的懸停類中看到了一個邊框底部，您能否嘗試移除該邊框？ – MultiDutch

變化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>

來源

2017-10-20 11:56:01

所有你需要做的是改變你的.big-column類的box-sizing到content-box。

來源

2017-10-20 11:56:19

回答

相關問題