css - Firefox：生成图标：悬停：状态之后？（CSS） - Thinbug

Firefox：生成图标：悬停：状态之后？（CSS）

时间：2009-10-15 10:13:55

标签： css

小问题。我有一个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属性令人费解的混乱，因为：hover：在h1标签之后运行完美，整个过程在Safari中运行。

任何人都有修复？

1 个答案:

答案 0 :(得分：2)

我认为你应该简化它。

<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和内容悬停在内部时，您将获得“显示块”和单击它的选项。