Firefox: Generating icon on :hover:after state? (CSS)
slight problem. I have a 20 x 20px delete icon which I want to sho开发者_StackOverfloww overlaying a 112 x 112px image when it is hovered over. The image also has some descriptive text below, so using Safari I pulled it back up using relative positioning. The code I threw together goes something like this:
<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>
Why am I posting all of the source? The crazy thing is that it fails to work in Firefox. Now I don't know whether it's the convoluted mess of CSS3 properties, because the :hover:after on the h1 tag works perfectly, and the whole thing works in Safari.
Anyone have a fix?
I think you should simplify it.
<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>
by default your close image will be invisible. When you hover the div and the content inside, you will get your "display block" and the option to click it.
加载中,请稍侯......
精彩评论