問題タブ [pure-css]

私はスライダーを持っています、そしてそれはうまく機能しています。しかし、私には小さな問題が 1 つあります。<li>クリックしたときではなく、いずれかの上にカーソルを置いたときにスライダーの画像を変更したい。

これは可能ですか？このリンクを見つけましたが、新しいスタイルがすでに利用可能になっているのではないでしょうか?

絶対配置、インライン/インラインブロック表示、フレックス表示などを2日間考え、試行錯誤した後...私はまだ質問に対する答えを見つけられませんでした-「タイムスタンプのラベル位置をスタイルする方法は、純粋な CSS を使用した下のスクリーンショット?".

条件：

1. タイムスタンプの幅は、親ブロックの min-width 60px から max-width 100% までさまざまです (親には max-width 値があり、右にフロートします)。
2. タイムスタンプが 100% より小さい場合 (例: 50%)、その左側のスペースはテキストで埋められ、タイムスタンプは常に右揃えになります。
3. テキストとタイムスタンプが親の最大幅よりも小さい場合 - それらは 1 行に表示されます (スクリーンショットの 1 番目と 2 番目のメッセージのように)
4. タイムスタンプがテキストの 1 行に収まらない場合 - ドロップダウンして右揃え
5. テキストが 1 行に収まらない場合 (スクリーンショットの 3 番目のメッセージのように)、タイムスタンプが 2 行目に表示され、右揃えになり、その上のスペースをブロックしません。

今までは JS でしか実現できませんでしたが、純粋な CSS で動作させることは可能だと思います。

UPD: http://jsbin.com/gatifevowu/2/edit?html,css,outputを手伝いたい場合は、サンドボックスの例を大まかなコードで追加しました。

PLNKRの問題例

ラベルには Group By と書かれていますが、なぜか文字がすべて重なっています。

HTMLは次のとおりです。

Pure CSS ライブラリを使用しないと、問題は解決します。純粋な CSS を維持しながら、台無しにせずにラベル フォントを使用できる方法はありますか?

私は Pure CSS フレームワークの初心者です。私の要件によると、正規化CSSを含めたくありません。Pure CSS モジュール (ベース) の 1 つで正規化が利用できると思います。どうすればいいですか？

純粋なcssを使用してWebサイトでオーバーレイホバー効果を作成しようとしています

しかし、オーバーレイがトリガーされない画像にカーソルを合わせると、問題が発生しました。別の方法で行う必要があることはわかっていますが、今は方法を知りません。CSS:

Purecss フレームワークのプロジェクト状況を知っている人はいますか? 彼らのブログと github から、それは死んだプロジェクトのようです。