通過html設置css值？

我使用php，html和css創建一個標題，首先顯示標題，然後滑動更多以揭示懸停節選。後期基本設置的通過html設置css值？

結構示例（簡化爲清楚起見）：

<div class="post-container"> 
    <a href="post-link.html"><img src="postThumbnail.jpg" /></a> 
    <span class="post-caption-container"> 
     title 
     this is the excerpt 
    </span> 
</div>

CSS文件

.post-container{ 
    position: absolute; 
    height: 200px; 
    width: 300px; 
    overflow: hidden; 
} 

.post-caption-container{ 
    width: 300px; 
    height: 80px; 
    top: -45px; 
} 

.post-container:hover .post-caption-container{ 
    top: 0px; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
}

內嵌HTML覆蓋造型

<div id="post-container" style="height: 140px;"> 
    <a href="post-link.html"><img src="postThumbnail.jpg" /></a> 
    <span class="post-caption-container" style="height: 50px; top: -25px; "> 
     title 
     this is the excerpt 
    </span> 
</div>

「style = top：-25px;」的部分造成問題。

我最好的猜測是內聯html樣式「style = top：-25px;」在「.post-caption-container」和「.post-container：hover .post-caption-container」中都會覆蓋值，這不是我想要的。

我需要「.post-container：hover .post-caption-container」值保留「top：0px;」。

我已花了大約一個星期的時間試圖解決這個問題，但我卡住了！我不知道這是不可能實現的嗎？

任何幫助，將不勝感激。如果這個問題是不可能的，也許另一種方法來達到同樣的結果，也會喜歡一些不同的想法！ oi vey，非常感謝！

來源

2013-05-27 SquigglePad

像top: XXpx等定位值不工作，除非它們所應用的元素也有一個位置設置，如position: relative，所以也許嘗試添加。我不太明白你正在使用的示例，但這可能是你需要的所有工作。

PS：歡迎來到Stack Overflow。 :-)

編輯：在迴應下面的評論，我現在明白，問題與內聯樣式重寫樣式表聲明有關，是的，內聯樣式在梯級法則中承載更多的樣式表規則。

然而，重寫內聯樣式的一種方式，用!important:

.post-container:hover .post-caption-container{ 
    top: 0px !important; 
}

所以，你把！規則之後，但在分號之前重要。（注意上面.post-caption-container之前的.這個時間段，你把它排除在外了，但是沒有它，聲明就不會工作了，

來源

2013-05-27 15:05:01

謝謝！我試過了，但是即使我聲明position：relative也不行。問題的根本原因歸結於爲什麼在標記中聲明「top：xxpx」將覆蓋該類頂部的所有實例：xxpx。在css文件中有兩個頂部：xxpx出現在類本身和類中的實例：懸停，我需要一種方法來設置頂部：xxpx距離通過html，而不設置它在它的類：懸停部分 – SquigglePad

啊，我明白了，我已經編輯了我的答案，希望以上有一些更好的信息。:-) –

謝謝！這個。之前.post-caption-container是我在這篇文章中犯的一個錯字。！重要的問題固定的問題OH WOW我不敢相信，工作！非常感謝！！放置頂部：xxpx！重要;在類中：hover允許我通過內聯樣式對上層：xxpx進行的更改進行保留。 – SquigglePad

通過html設置css值？

回答

相關問題