0

私はphp、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」の両方の値をオーバーライドしていますが、これは私が望むものではありません。

「top: 0px;」のままにするには、「.post-container:hover .post-caption-container」の値が必要です。

この問題を解決するために約 1 週間を費やしましたが、行き詰まっています。これが達成不可能かどうかわかりませんか？

どんな助けでも大歓迎です。この問題が不可能な場合、おそらく同じ結果を達成するための代替方法として、いくつかの異なるアイデアも気に入るはずです! おい、どうもありがとう！

4

1 に答える 1

0

などのポジショニング値top: XXpxは、それらが適用される要素にも などの位置が設定されていない限り機能しないposition: relativeため、おそらくそれを追加してみてください。使用している例はよくわかりませんが、それだけかもしれませんあなたはそれを機能させる必要があります。

PS: スタック オーバーフローへようこそ。:-)

編集：以下のコメントに応えて、問題がスタイルシート宣言をオーバーライドするインラインスタイルに関連していることを理解しました。はい、インラインスタイルは、カスケードの法則におけるスタイルシートのルールよりも重要です。

ただし、インライン スタイルをオーバーライドする方法が 1 つあります。!important:

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

したがって、ルールの後、セミコロンの前に !important を配置します。.(上記の前のピリオドにも注意してください.post-caption-container。省略しましたが、それがないと宣言は機能しません。

于 2013-05-27T15:05:01.620 に答える