小问题。我有一个 20 x 20px 的删除图标，当它悬停在上面时，我想显示覆盖一个 112 x 112px 的图像。该图像下方还有一些描述性文字，因此使用 Safari 我使用相对定位将其拉回。我拼凑的代码是这样的:
<html>
<head>
<title>Gallery Test</title>
<style type="text/css">
html
{
background: #ebebeb;
}
.tsUser img
{
-webkit-border-radius: 16px 16px;
-moz-border-radius: 16px 16px;
-webkit-box-shadow:0 2px 6px #c0c0c0;
-moz-box-shadow:0 2px 6px #c0c0c0;
cursor:pointer;
}
.tsUser:hover:after
{
content: url(editor/icons/deleteIcon.png);
position: relative;
top: -155px;
left: 50px;
display: block;
}
.tsUser.current:hover:after
{
content: "";
}
.tsUser
{
text-align: center;
width: 150px;
float: left;
}
.tsUser h3, .tsUser p
{
margin:5px 0 0 0;
font-size: 0.8em;
}
.tsUser.current h3
{
color: red;
}
h1:hover:after
{
content: " And now the test is complete.";
}
</style>
</head>
<body>
<h1>Testing.</h1>
<div class="tsUser">
<img src="thumb.png" />
<h3>Title</h3>
<p>Description</p>
</div>
<div class="tsUser current">
<img src="thumb2.png" />
<h3>Title 2</h3>
<p>Description 2</p>
</div>
</body>
</html>
为什么我要发布所有源代码？疯狂的是它无法在 Firefox 中运行。现在我不知道这是否是 CSS3 属性的困惑，因为 h1 标签上的 :hover:after 工作得很好，而且整个事情在 Safari 中工作。
有人解决了吗？
最佳答案
我认为你应该简化它。
<div class="tsUser current">
<img src="thumb2.png" />
<h3>Title 2</h3>
<p>Description 2</p>
<a href="#close"></a>
</div>
<style>
.tsUser{text-align: center;width: 150px;float: left; position:relative; /* this is important */}
.tsUser:hover a.close {display:block}
.tsUser a.close {content: url(editor/icons/deleteIcon.png);position: absolute;top:10px; right: 10px;display: none; width: 20px; height:20px}
</style>
默认情况下，您的关闭图像是不可见的。当您将鼠标悬停在 div 和其中的内容时，您将看到“显示 block ”和单击它的选项。
关于css - 火狐 : Generating icon on :hover:after state? (CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1571456/