-2

現在、このサイトに取り組んでおり、次の機能を追加することを目標としています。

  • 単一の画像にカーソルを合わせると、見出しに含まれるタイトルを表示したい。
  • インタラクションはカラーバーから遷移し、同じ背景を持つ必要があります

これはおそらく CSS だけで達成できると思いますが、マークアップがどのように機能するかを視覚化するのに苦労しています。方向性の提案やポイントは大歓迎です。

4

3 に答える 3

1

これは CSS3 で実現できます。http://jsfiddle.net/zh3EC/

a > h3 {
    width: 100%;
    display: block;
    position: absolute;
    bottom: -1.5em;
    color: white;
    background-color: #993434;
    padding: 0.4em;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -o-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
}

a:hover > h3 {
    bottom: 0;
}
于 2013-03-29T17:22:29.137 に答える
0

divタイトルの中に abackground-imageh1(タイトル) を入れることができます。次に、疑似クラスを使用して、タイトル:hoverの不透明度を から0に変更します。1

HTML:

<div>
    <h1>Title Here</h1>
</div>

CSS:

div {
    background-image: url('image_here.jpg');
}

h1 {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

p:hover {
    opacity: 1;
}

JS フィドルの例

于 2013-03-29T17:04:06.567 に答える
0

このjQueryを試してください:

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
    }, function() {
    });
});
于 2013-03-29T16:58:48.083 に答える