0

リンクとして機能する表にいくつかの写真があり、ホバーすると再生ボタンが表示されます。

私は多くの異なるトリックを試しましたが、それらはすべて適切に機能しない問題を抱えています. 標準的な解決策を見つけるために、ここで質問を共有することにしました。

これが私がこれまでに行ったことです：

img{
    position: relative;
}
img:hover:before {
    background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
    content:"";
    width: 100%;
    min-height: 100px;
    position: absolute;
    left: 0;
}

正しい方向に進んでいるかどうかはわかりませんが、デモhttp://jsfiddle.net/jmXdh/8/を見てください。間違っている場合は、他の方法でお知らせください。

4

2 に答える 2

3

残念ながら、置換された要素で疑似要素と疑似要素を使用することはできません。置き換えられたすべての要素のコンテンツは、CSS の範囲外です。::before::after

生成および置換されたコンテンツ モジュール (WD)から:

置換された要素には、'::before' および '::after' 疑似要素がありません。置換されたコンテンツの場合の「コンテンツ」プロパティは、要素のボックスのコンテンツ全体を置き換えます。

于 2013-06-24T21:15:23.613 に答える
2

追加のマークアップを追加できると仮定すると、次のように動作する可能性があります。

http://jsfiddle.net/isherwood/jmXdh/11/

a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
a:hover .play {
    background:url(http://placehold.it/80x80) no-repeat center center;
    opacity: 0.8;
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -50px;
}

<a href="/">
    <div class="play"></div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
    <br />
    <b>Video test</b>
</a>

またはトランジション効果で：

http://jsfiddle.net/isherwood/jmXdh/12/

.play {
    opacity: 0;
    transition: opacity 0.3s;
}
a:hover .play {
    opacity: 0.7;
}
于 2013-06-24T21:25:24.313 に答える