2

このコードで画像オーバーレイを機能させるにはどうすればよいですか？

私が欲しいのは、カーソルが画像の上に移動したときに画像の上にオーバーレイするアイコンのセットです。

http://socialartist.co/index.html

問題のコードはHTML5とCSS3であり、かなり多くのマークアップがあります。

<ul class="items x_columns">
 <li data-id="id-1" data-cat="#luxury">
  <div class="preview"><a href="#" class="frame">
   <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
  </div>
 <a class="title" href="#">Kirkbridge DNB</a>
 <p>UK | Drum and Bass</p>
</li>

新しいdivを追加しようとすると、デザインが壊れてしまいます（たとえば、プレビュークラスの境界線がめちゃくちゃになります）

上記のように、既存の画像にオーバーレイする「簡単な方法」はありますか。

これをFiddleで設定する方法はよくわかりません。pplが上記のページURLで開発者ツール（要素の検査）を使用できることを望んでいますか？

4

2 に答える 2

2

私がそれを正しく理解した場合：

支払いたいアイコンをアンカータグ内に追加します。

簡単で汚い例：http：//jsfiddle.net/ZVSVw/

<a href="#" class="frame">
   <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
   <div class=overlay>ICON</div>
</a>

デフォルトでに設定display: noneし、セレクターでスタイルを設定します.frame:hover > .overlay。

あなたのコメントに

style.css：1654から次の行を削除します。

a > .frame:hover, a.frame:hover{
    background: #ffffff;
    /* border: 1px solid #24bfb6;  remove this line */
}
于 2012-05-03T14:32:18.960 に答える
1

プロパティを設定して他のオーバーレイ画像を追加し、基本的に2つの画像を切り替えることができますdisplay: none;。

Javascript：

jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
    jQuery(this).find('img').toggle();
    jQuery(this).find('div.overlayContent').toggle();
});​

HTML：

<li data-id="id-3" data-cat="#holiday">
    <div class="preview">
        <a href="#" class="frame">
            <img src="http://..." alt="default picture">
            <div class="overlayContent" style="display: none;">...overlay content</div>
            <!--img src="http://..." alt="alternate picture" style="display: none;"-->
        </a>
    </div>
    <a class="title" href="#">TEST ME!</a>
    <p>Test this one!</p>
</li>
于 2012-05-03T14:52:21.900 に答える