webspider25 Posted September 27, 2007 Share Posted September 27, 2007 Hi,Below is my code by which i am trying that when i hover my cursor on the "01" the image shuld be displayBut I am not getting where my code is going wrong Its in pur CSS and I dont want to add any other language in this.I want it in pure CSSSo pls any one help meThanks<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>#main{position:absolute;width:500px;height:320px;border:2px solid black;background-color:white;}.main{padding:0;margin:50px 0 0 80px;list-style-type:none;position:relative;width:300px;}.main img{border:0;}.main li{float:left;}.main li a img{position:absolute;visibility:hidden;}.main li a:active img, .main li a:focus img, .main li a:hover img{visibility:visible;}</style></head><body><div id="main"><ul class="main"><li><a href="#">01<img src="img/photo01.jpg" alt="#" title="#" /></a></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 27, 2007 Share Posted September 27, 2007 Don't use visibility, display works better. Use display:none; to turn it off and either use inline or block to show it again, depending on whether you want it to be inline or block. Try both to see what the difference is. Link to comment Share on other sites More sharing options...
webspider25 Posted September 28, 2007 Author Share Posted September 28, 2007 Hi,dear its not working....Tell me now wat to doThanksBYe Don't use visibility, display works better. Use display:none; to turn it off and either use inline or block to show it again, depending on whether you want it to be inline or block. Try both to see what the difference is. Link to comment Share on other sites More sharing options...
Err Posted September 28, 2007 Share Posted September 28, 2007 He meant for you to use a CSS style called "display". For example: .main li a:active img, .main li a:focus img, .main li a:hover img{ display: block;} http://www.w3schools.com/css/pr_class_display.aspIf that's in fact what you did, look over the Pseudo-classes and related links for answers. Google should help. Link to comment Share on other sites More sharing options...
webspider25 Posted September 28, 2007 Author Share Posted September 28, 2007 Hi,I know he meant to use CSS codedisplay:none;ordisplay:show;ordisplay:block;But what i meant is that.......... its not working.......bye He meant for you to use a CSS style called "display". For example:.main li a:active img, .main li a:focus img, .main li a:hover img{ display: block;} http://www.w3schools.com/css/pr_class_display.aspIf that's in fact what you did, look over the Pseudo-classes and related links for answers. Google should help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.