滑塊上懸停不重疊的文字

我敢肯定，這是一個簡單的辦法，但我是新來的HTML/CSS - 我想一段文字在一個div在其包含的圖像以及文本內部的div滑動。目前滑塊div沒有覆蓋整個div，因爲背景文本阻止它做這件事。我如何使它完全重疊？滑塊上懸停不重疊的文字

這裏是我的代碼：

.items-tall { 
 
\t background-color: #F473FF; 
 
\t height: 450px; 
 
\t overflow: hidden; 
 
} 
 

 
.items-tall-slider { 
 
\t background-color: black; 
 
\t height: 450px; 
 
\t width: 100%; \t 
 
\t margin-left: -100%; 
 
\t transition: 0.5s; 
 
\t color: white; 
 
\t font-size: 60px; 
 
\t text-align: center; 
 
\t line-height: 450px; 
 
} 
 

 
.items-tall:hover .items-tall-slider { 
 
\t margin-left: 0%; 
 
\t transition: 0.5s; \t 
 
}

<div class="row"> 
 

 
<div class="col-4 col-m-6 items-tall"> 
 
This is my title.<br> I currently want all this text behind the slider. Hover over this. 
 
    
 
<div class="items-tall-slider"> Sliding info. </div> 
 

 
</div>

來源

2016-08-04 Ria

添加到您的.items-tall-slider：

position:absolute; 
    top:0;

這對於定位：

.row { 
    position:relative; 
}

.items-tall { 
 
\t background-color: #F473FF; 
 
\t height: 450px; 
 
\t overflow: hidden; 
 
} 
 

 
.items-tall-slider { 
 
\t background-color: black; 
 
\t height: 450px; 
 
\t width: 100%; \t 
 
\t margin-left: -100%; 
 
\t transition: 0.5s; 
 
\t color: white; 
 
\t font-size: 60px; 
 
\t text-align: center; 
 
\t line-height: 450px; 
 
    position:absolute; 
 
    top:0; 
 
} 
 

 
.items-tall:hover .items-tall-slider { 
 
\t margin-left: 0%; 
 
\t transition: 0.5s; \t 
 
} 
 

 
.row { 
 
    position:relative; 
 
}

<div class="row"> 
 

 
    <div class="col-4 col-m-6 items-tall"> 
 
    This is my title.<br> 
 
    I currently want all this text behind the slider. Hover over this. 
 

 
    <div class="items-tall-slider"> 
 
     Sliding info. 
 
    </div> 
 
    </div> 
 

 
</div>

你也錯過了一個</div>關閉標籤。我在這個例子中添加了這個。

來源

2016-08-04 07:55:18 Randy

在您的例子最簡單的解決辦法是增加position: absolute; top: 0到.items-tall-slider。雖然這有潛在的不良副作用，滑塊不再佔用任何空間。因此，頁面中的其他元素也可以與滑塊重疊。

如果你不想要這個副作用，你可以陰性切緣添加到您的滑蓋這樣的（或在下面的例子中）和therfore重疊文本：

.items-tall-slider { 
    margin-top: -40px; 
}

.items-tall-slider { 
 
margin-top: -40px; 
 
} 
 

 
.items-tall { 
 
\t background-color: #F473FF; 
 
\t height: 450px; 
 
\t overflow: hidden; 
 
} 
 

 
.items-tall-slider { 
 
\t background-color: black; 
 
\t height: 450px; 
 
\t width: 100%; \t 
 
\t margin-left: -100%; 
 
\t transition: 0.5s; 
 
\t color: white; 
 
\t font-size: 60px; 
 
\t text-align: center; 
 
\t line-height: 450px; 
 
} 
 

 
.items-tall:hover .items-tall-slider { 
 
\t margin-left: 0%; 
 
\t transition: 0.5s; \t 
 
}

<div class="row"> 
 

 
<div class="col-4 col-m-6 items-tall"> 
 
This is my title.<br> I currently want all this text behind the slider. Hover over this. 
 
    
 
<div class="items-tall-slider"> Sliding info. </div> 
 

 
</div>

來源

2016-08-04 08:00:39 MattDiMu

滑塊上懸停不重疊的文字

回答

相關問題