[英]My :hover in CSS will only affect a pice of my div/image
所以,我被卡住了..我一直在試圖找出我的代碼出了什么問題。 當我將鼠標懸停在它上面時,我試圖讓我的圖像變暗一點。 我在 CSS 中這樣做。 它有效,但它只覆蓋了我圖像的一半。 添加我的文本后,它只會在我的文本下方顯示懸停功能,而當我刪除文本時,它只會從頂部顯示圖像的 1/3。
我是菜鳥,希望這對外面的人來說很容易解決!
我的html:
<div class="contentbild1">
<picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="Biler/bildtestmobil.jpg" alt="Trädvård" style="width:100%;"></picture>
<div class="contentbildtext1">
<font class="Contenttext">TRÄDVÅRD</font>
</div>
</div>
和我的 CSS:
.contentbild1{
position: relative;
}
.contentbild1:hover > div {
background-color:rgba(0, 0, 0, 0.3);
transition: all 1s ease;
}
.contentbildtext1{
position: absolute;
top:0%;
left:0%;
width:100%;
padding-top:5.8%;
text-align:center;
font-family:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
color:orange;
font-size:200%;
font-weight: bold;
text-decoration:none;
}
@media screen and (max-width: 736px){
.contentbildtext1{
padding-top:17%;
}
}
公平地說,我不知道很多,主要是我搜索我想要的東西並找到我需要的代碼或功能。 這個問題超出了我的范圍。 也許是因為我的代碼一團糟(?)。
我也很難將我的文本定位在中心,也許這在代碼中是可見的,無論如何它現在都可以正常工作。
感謝您的幫助!
您需要使.contentbild1
變黑,而不僅僅是.contentbild1 > div
:
.contentbild1{ position: relative; } .contentbild1:hover { background-color:rgba(0, 0, 0, 0.3); transition: all 1s ease; } .contentbildtext1{ position: absolute; top:0%; left:0%; width:100%; padding-top:5.8%; text-align:center; font-family:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif; color:orange; font-size:200%; font-weight: bold; text-decoration:none; } @media screen and (max-width: 736px){ .contentbildtext1{ padding-top:17%; } }
<div class="contentbild1"> <picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Trädvård" style="width:100%;"></picture> <div class="contentbildtext1"> <font class="Contenttext">TRÄDVÅRD</font> </div> </div>
檢查添加'底部:0;' 到 .contentbildtext1 css 類。
.contentbildtext1{
position: absolute;
top: 0%;
bottom: 0;
left: 0%;
width: 100%;
padding-top: 5.8%;
text-align: center;
font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
color: orange;
font-size: 200%;
font-weight: bold;
text-decoration: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.