Question

我有一张图片，当它悬停时，它里面有一些文字，你可以点击它然后链接到另一个页面。事情是我认为实现它的方式并不实用。我用文本链接创建了

标签，这就是我在悬停时获得链接和文本的方式。文本看起来像一个链接，我只想要普通文本，但同时保持可点击图像悬停时。我只是想知道我这样做的方式是否实用还是有更好的方法吗？

jsfiddle - http://jsfiddle.net/gqg320on/1/

<section class="main_content">
    <article id="thumbnail_1">
        <div class="imgwrap">
         <a href=""><img src="images/taffies.jpg" alt="taffies website thumbnail"></a>
        <a href="http://www.google.com"><p class="imgDescription">sdasdasd</p></a>
        </div>
    </article>

    <article>
        <a href=""><img src="images/fitstyle-thumbnail.png" alt="fitstyle website thumbnail"></a>
    </article>
</section> <!-- end of section -->





.imgwrap{
width:260px;
height:200px;
position:relative;
}

.imgDescription{
background:blue;
visibility:hidden;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;

}



.imgwrap:hover .imgDescription{

visibility:visible;
}

Answer 1

试试这个

<a href="google.com>
    <div class="imgwrap">
        <img src="" />
        <p class"imgdescription">Text</p>
    </div>
</a>

并将其添加到CSS：

a{
    text-decoration: none;
}

Answer 2

在@caeth发布时，您可以将图像块和<p>元素包装在单个<a>（锚点）中。我会更进一步，并在悬停时使用高级 CSS选择器作为<p>元素，如下所示：

.imgwrap p
{
    position:absolute;
    margin:0; /*<p> elements get margins by default unless declared otherwise.*/
    background-color:blue;
    top:0;/*You also had right:0 and bottom:0, which was unnecessary*/
    left:0;
    color:white;
    width:260px;
    height:200px;
    visibility:hidden;
    line-height:200px;/*centering the text vertically*/
    text-align:center;/*centering the text horizontally*/
}

.imgwrap:hover p /* Selecting the <p> element when the parent element (.imgwrap) is "hovered"*/
{
    visibility:visible;
}

然后您的HTML将是：

<a href="#">
  <div class="imgwrap">
    <p>Pikaboo text</p>
    <img src="http://placehold.it/260x200" width="260" height="200" />
  </div>
</a>

看看：http://jsfiddle.net/oL4bqm2a/

悬停带有内容的图像

2 个答案: