如何使用css在悬停时在图像上显示图像

Posted 2023-03-06

【中文标题】如何使用css在悬停时在图像上显示图像

【英文标题】：How to display image over image on hover with css

【发布时间】：2013-08-24 02:10:20

【问题描述】：

我有一个带有links 的图片库。

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

<div class="gallerypagetabs"><a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html"><img  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  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  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  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

当有人将鼠标悬停在图像上时，我想做的是显示带有星星的透明图像。因此，如果一个人将鼠标悬停在免费维多利亚时代钱包图案图像上，他们会看到一个图像 - 比方说 - 五颗星，表示该图案已获得我的 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 来完成。这是我希望它看起来的样子。感谢您的帮助！

有效的代码！ （谢谢西马农！） （将gallerypagetabs 更改为gallerypatterntab 以将类与博客的其余部分隔离开来。来自Blogger 的屏幕截图——是的，Blogger 喜欢重写引用等内容）

【问题讨论】：

我认为问题在于您的链接实际上位于图像后面，因此它可能正在应用悬停效果，但您看不到它，因为您的 <img> 在前面。

【参考方案1】：

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

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;

【讨论】：

我不明白。 # 替换链接了吗？我不想那样做。

这只是一个示例标记，表明您现有的标记可以正常工作（尽管您可能想在某处添加一个类）。

它工作！太感谢了！ .gallerypagetabs 位置：相对；显示：内联块； .gallerypagetabs a:hover:before content: '';显示：块；背景图片:url('i.imgur.com/IKAXZKz.png'); /* 你的背景 / width: 200px; //i>图片宽度/高度：200px； / 图像高度 */ position: absolute;顶部：0；右：0；

为了后代，我不得不将该类与博客的其余部分隔离开来，因此我将类更改为仅针对该页面的 gallerypatterntab。

您不想注释掉宽度/高度属性：cssdeck.com/labs/84cu2cvw。

【参考方案2】：

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

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

 .gallerypagetabs a:hover
     z-index:2;
 

 .gallerypagetabs
     position:relative;
 

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

【讨论】：

抱歉，我忘记添加 z-index。有了上述内容，您与星星的链接在悬停时将具有比 <img> 更高的 z-index 并且应该放置在可见性堆栈上的更高位置。

为什么投反对票？这将在悬停时显示链接中的星星。请让我知道我是如何误解这一点的。

图片在锚点内。

尝试添加上述z-index，但没有成功。它只是把所有东西都挤在一起。实际上，这是在您告诉我链接在图像后面之后我想到的第一件事。让我试试下一个代码...

【参考方案3】：

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

您可以在 anchor 内的 absolute position 中添加包含星星的元素：

<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
    <img src="https://lh3.goog...An-purse-pattern-1.jpg" >
    <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;

---

P.S - <br /> 应该是自动关闭的。最好不要只用它在图像后换行，而是给图像赋予这种风格：

a img  
   display: block;

【讨论】：

也没有用。实际上，这样的事情无论如何对我都不起作用，因为我使用 Blogger 标签页来为我的静态页面创建我的 html。换句话说，我点击这个页面：costumingdiary.blogspot.com/search/label/… 然后复制/粘贴到静态页面：costumingdiary.blogspot.com/p/costume-pattern-reviews.html 这让我很容易更新静态页面，因为 Google 拒绝抓取 Blogger 标签页面。标签页面充满了创建页面的javascript（我没有编写）。

由 Blogger 或 javascript 创建。如果可以的话，我也会摆脱它。博主喜欢在任何地方添加 。 :(