代码之家 › 专栏 › 技术社区 › different

firefox:生成图标on:hover:after状态?(CSS)

css

different · 技术社区 · 16 年前

小问题。我有一个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>

为什么我要发布所有源代码?疯狂的事情是它在火狐中无法工作。现在我不知道这是否是CSS3属性的复杂混乱,因为:hover:after在h1标签上工作得很好,而整个事情在safari中工作。

有人有办法吗?

1 回复 | 直到 13 年前

Erik5388 16 年前

我认为你应该简化它。

<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和里面的内容时,你会得到你的“显示块”和点击它的选项。

推荐文章