Having text show on mouseover
So I'm trying to have a background image disappear and then have some text appear in the div with a link. I've gotten the image to disappear on mouseover but I can't get the text to display. Here is what I've got so far. I'm kinda new to this stuff.
/* I'm have the image removed with the first line, then setting the link
as hidden then trying to make it visible, but the link never shows */
$('#res').mouseover(function(){
$(this).removeClass('resume');
$('#reslink').css(visibility,visible);
});
HTML:
<div id = "res" class = "floatleft squares resume"><a id = "reslin" class = "link" href="resume.php">link</a></div>
<div id = "pro" class = "floatleft squares projects"><a id = "prolin" class = "link" href="projects.php"></a></div>
<div id = "con" class = "floatleft squares contact"><a id = "conlin" class = "link" href="c开发者_如何学Contact.php"></a></div>
<div id = "abo" class = "floatleft squares about"><a id = "abolin" class = "link" href="about.php"></a></a></div>
Styles:
a{
display: block;
background: grey;
height: 100%;
width: 100%;
visibility: hidden;
}
If any more info is needed, lmk, thanks.
Instead of
$('#reslink').css(visibility,visible)
try
$('#reslin').css('visibility','visible')
Maybe it's just a typo: #reslink
or #reslin
?
Your id on the anchor is "reslin" not "reslink"
Try this:
$('#reslin').css("visibility", "visible");
or
$('#reslin').css("display", "block");
精彩评论