0

私は昨日ここでこの解決策について質問し、それを解決したと思い、答えを正解としてマークしましたが、今ではそれが完全に正しくないことに気づきました。

私はフィドルで遊んでいます、本質的に私はこれが欲しいです。

転がる

左側は非ホバー状態で、次にオンホバーは青いオーバーレイとテキスト「プロジェクトの表示」が必要です。

これが私が遊んでいるフィドルです。私が見せることができないのはテキストだけです。

jsFiddle

<div class="cont">

<div class="work-thumb"><img src="http://www.menshealth.co.uk/cm/menshealthuk/images/qQ/mh-face-off-winner-MED-07032011.jpg" /><a class="roll-text">View</a></div>

注意すべきいくつかのこと...<img>応答する必要があります。したがって、「ビュープロジェクト」もレスポンシブである必要があります（固定ピクセル幅を使用することはできません）。

どんな助けでも大歓迎です。ありがとう

4

2 に答える 2

3

divアンカー自体ではなく、要素にカーソルを合わせたときにテキストをアクティブにする必要があります。

.work-thumb:hover a.roll-text {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 10px;
    text-align: center;
    color: #fff;
}

更新された jsFiddleを参照してください。

于 2013-02-27T13:01:56.357 に答える
0

テキストは非表示になっているため、兄弟セレクター+を使用してテキストを表示することもできます。

Demo

.work-thumb img:hover + .roll-text {
    display:block;
}
于 2013-02-27T13:04:41.007 に答える