7

我有一个带有链接的图片库。

编辑：这是我必须使用的代码：

<div class="gallerypagetabs"><a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern</a><a href="http://costumingdiary.blogspot.com/2012/12/natural-form-victorian-overskirt.html"><img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt</a><a href="http://costumingdiary.blogspot.com/2012/11/truly-victorian-tv221-1878-tie-back.html"><img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review</a><a href="http://costumingdiary.blogspot.com/2012/10/truly-victorian-tv121-petticoat-pattern.html"><img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review</a>..ad naseum..</div>

CSS：

.gallerypagetabs a,.gallerypagetabs p{
    float:left;
    font-size:.80em;
    height:250px;
    padding:10px;
    text-align: center;
    width:200px
}

我想做的是当有人将鼠标悬停在图像上时显示带有星星的透明图像。因此，如果一个人将鼠标悬停在 Free Victorian Purse Pattern 图像上，他们会看到一张 - 比方说 - 五颗星的图像，表示该图案已收到我的 5 颗星评分（满分 5 颗星）。

我已经尝试了以下两种方法，但都没有运气。代码在悬停时显示图像，但它显示在图像底部而不是重叠：

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit
 }

和

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit;
    z-index:10
}

有什么建议吗？我不想使用 Javascript，并且我想在 HTML 中添加尽可能少的编码，除了在它的开头添加另一个类或 id 之外，不能更改 html。这一切都必须通过 CSS 来完成。这是我希望它看起来的样子。谢谢你的帮助！

在此处输入图像描述

有效的代码！（感谢 cimmanon！）（将 gallerypagetabs 更改为 gallerypatterntab 以将类与博客的其余部分隔离开来。来自 Blogger 的屏幕截图 - 是的，Blogger 喜欢重写引用等内容） 在此处输入图像描述

4

3 回答 3

8

为此，您可以使用伪元素。不需要额外的标记。

http://cssdeck.com/labs/anxnrkhr

<a href="#"><img src="http://placekitten.com/100/100" /></a>

a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 20px; /* image width */
  height: 100px; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}
于 2013-08-21T16:33:03.843 回答
0

将图像放在锚点的背景上是行不通的，因为图像会隐藏它。

您可以在anchor内的绝对位置添加包含星星的元素：

<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
    <img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
    <br>
    Free Victorian Purse Pattern
    <i class="stars"></i>
</a>

还有一个与此类似的 CSS（所有数字都可以变化）：

a { 
    position: relative;
}

.stars {
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit;
    width: 20px;
    height: 80px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

a:hover .stars {
    display: block;
}

PS -<br />应该是自动关闭的。最好不要只使用它在图像之后创建一个新行，但也许给图像这种风格：

a img { 
   display: block;
}
于 2013-08-21T15:48:16.437 回答
0

这是未经测试的，但我认为你想要这样的东西：

.gallerypagetabs a, .gallerypagetabs img{
     position:absolute;
     z-index:1;
 }

 .gallerypagetabs a:hover{
     z-index:2;
 }

 .gallerypagetabs{
     position:relative;
 }

这是未经测试的，但希望能让您了解如何实现您所追求的效果。

于 2013-08-21T15:49:33.207 回答