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

工作演示

您需要的只是 z-index

编辑 1： 更新的小提琴。

编辑2：这是为了更进一步并使图像响应

小提琴
1 小提琴2

第一个小提琴使整个图像可点击。第二个仅使“St John's Hotel”字样可点击

请注意，我为第二个小提琴添加了一些 CSS，以便文本保持白色并且没有下划线，因为它是一个链接

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

我已经更新了新的 jsfiddle 看看.. jsfiddle.net/LGh4Z/9/

于 2013-08-07T12:16:41.707 回答