0

私は CSS を初めて使用し、ここ数週間実験を行っています。ボタンの CSS ホバー オーバー イメージを作成しましたが、その上にテキストを追加する必要があります。

何らかの理由で追加しようとするたびに、テキストが下の div ボックスに配置され、希望する領域に配置されません (画像の上)

以下の JSfiddle にコードを追加しました。

http://jsfiddle.net/leeyum8721/LGh4Z/

 <style>
    .img3 {
        width: 313px;
        height: 177px;
    }
    .StjohnsPageButton {
        width:313px;
        height:177px;
        display:block;
    }
    #StjohnsButton {
        background-image:url('http://www.ovoma.com/wp-content/uploads/2013/08/Venues-Page_03-2.jpg');
    }
    .StjohnsPageButton:hover {
        background-position:left 177px;
    }
    </style>

<div class="img3 left">
<a href="" id="StjohnsButton" class="StjohnsPageButton"></a>
</div>
4

2 に答える 2

0

新しいjsfiddleを更新しました。チェックしてください.. jsfiddle.net/LGh4Z/9/

于 2013-08-07T12:16:41.707 に答える
0

ワーキングデモ

必要なのは z-index だけでした

編集 1: 更新されたフィドル。

EDIT 2：これはさらに進んで、画像をレスポンシブにすることです

フィドル
1 フィドル2

最初のフィドルは、画像全体をクリック可能にします。2 つ目は、 「St John's Hotel」という単語だけをクリック可能にします。

2 番目のフィドルに CSS を追加して、テキストの色が白のままになり、リンクであるため下線が付かないことに注意してください。

.textoverimage a {
    color: #FFFFFF;
    text-decoration: none;
}
于 2013-08-07T12:10:47.467 に答える