Image Hover isn't appearing in CSS but it does in HEAD -
.cssnav { position:relative; font-family: arial, helvetica, sans-serif; background-image: url(img/twitter.jpg)no- repeat center center; background-repeat: no-repeat; white-space: nowrap; display: block; width: 211px; height: 44px; margin: 0; padding: 0; } .cssnav { display: block; color: #000000; font-size: 11px; width: 211px; height: 44px; display: block; float: left; color: black; text-decoration: none; } .cssnav img {width: 211px; height: 44px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 30px; top: 15px; margin: 0px; padding: 0px; cursor: pointer; width: 149px; height: 14px; text-align: center; } /* end of navigation */ } <html> <head> <title>the history of aeronautics</title> <meta charset="utf-8" /> <meta name="description" content="a parallax scrolling experiment using jquery" /> <link rel="stylesheet" media="all" href="css/test.css" /> </head> <body> <!--main navigation start--> <div class="cssnav"><a href="http://www.search-this.com/" title="search engine submission"><img src="img/twitter.png" alt="search engine submission" /><span>search engine submission</span></a></div> <div class="cssnav"><a href="http://www.search-this.com/website-design/" title="website design"><img src="img/twitter.jpg" alt="website design" /><span>website design</span></a></div> </body> </html>
i've included css , html. i've been @ awhile trying figure out why it's not working... i'm using trifecta rollover buttons code here: http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml
it works when set code in area of html not when set in css
okay, first of all, mat said, either need linked style sheet adding:
<link href="/filename.css" rel="stylesheet" type="text/css" media="screen" /> in head tag. or can add together style tags (also within head tag):
<style> body { background-color: #f00; } </style> other that, if still having trouble, here:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
for rules of specificity on css, general rule of thumb (that have used) on occasion can't seem pinpoint why have specified render doesn't render in external css file, utilize inline, this:
<p style="background-color: #f00;">paragraph contents...</p> this because inline css has higher specificity (inherently) external file's css.
css hover hyperlink
No comments:
Post a Comment