CSS - Css Mouseover Problem
Hi
I'm kinda new to this forum, so i'll just hope im in the right place to post my problems.. I'm from the Netherlands, so i dont know if my English is always correct.. I'll try to make it as best as i can.. ok.. that was the short intro.. now the problem: ok.. i have made the following page, using some css from a website. Code: <html> <head> <title>lol</title> </head> <style media="screen" type="text/css"> /* NAVIGATION BUTTONS */ .cssnav { position:relative; font-family: arial, helvetica, sans-serif; background-image: url(overbtn2.jpg); background-repeat: no-repeat; white-space: nowrap; display: block; width: 211px; height: 44px; margin: 0; padding: 0; } .cssnav a { display: block; color: #000000; font-size: 11px; width: 211px; height: 44px; display: block; float: right; 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 */ </style> <body bgcolor="#000000"> <!--MAIN NAVIGATION START--> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div> <!--MAIN NAVIGATION END--> </body> </html> this was a test page for a menu i am currently making. I also wanted to make a link that works quite like this, only without the text in the buttons. Currently the idea is like.. i made a nice pic in paint of a closed book, and on a mouseover.. the other pic i made, an opened book, should appear.. but it doesnt the source is now like this Code: <html> <head> </head> <style media="screen" type="text/css"> /* NAVIGATION BUTTONS */ .cssnav { position:relative; background-image: url(open.bmp); background-repeat: no-repeat; white-space: nowrap; display: block; margin: 0; padding: 0; } .cssnav a { display: block; display: block; float: right; color: black; } .cssnav img {border: 0} * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} } /* END OF NAVIGATION */ </style> <body bgcolor="#000000"> <!--MAIN NAVIGATION START--> <div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="dicht.bmp" alt="home" /><span>home</span></a></div> <!--MAIN NAVIGATION END--> </body> </html> can anyone please tell me how i can solve this problem? thanks in advance.. -Emiel- Similar TutorialsHave some (for me) a mysterious problem when mousing over an image inside a div. I use javascript to change the class of a div when either onMouseOver or onClick of the div. If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine. If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine. Why is that? Is there a way to make it work as I want? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="Keywords" content="div, bug, onmouseover, onclick, image, "> <meta name="Title" content="DIV onmouseover bug"> <meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire"> <title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title> <style type="text/css"> body { margin:0; padding:0; } .esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; } .elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; } </style> </head> <body> <div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;"> <div style="display:block; margin:2px;"> MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br> <img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br> </div> </div> <div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;"> <div style="display:block; margin:2px;"> Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br> The only difference between the two divs a First DIV uses onMouseOver and second uses onClick<br><br> I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br> <img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br> Tested in: FF, IE, OP NE<br><br> I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do. </div> </div> </body> </html> Im new to CSS... i have created a nested set of <div> tags, the outer one is an image and the second one has a white background with an opacity set to it so you can see the image behind it, and the box has some text inside... i want to have a mouseover event that makes that second div invisible (so that the whole photo behind it will show). Either a mouseover or a mouseclick event...i would prefer a mouseclick, but i need one or the other i dont want to end up doing it in photoshop with rollover images...its so much prettier in CSS! -Thank You I have several small images in a row. Mouseover on each changes them to different image. However, trying to achieve paragraph of text to appear below this row - differerent <div> of text depending on which image is hovered over. My trial so far uses code below. (a) am I correct in saying I can achieve what I want with only CSS? (b) I know it's got something to do with hiding and showing a block?!? Suggestions appreciated. Thanks. <style type="text/css"> div.image1 { background: url(image1.jpg) no-repeat top left; width: 100px; height: 100px; } div.image1:hover { background: url(image1_hover.jpg) no-repeat top left; width: 100px; height: 100px; } </style> <div class="image1"> </div> Have a look at this menu: http://elliottback.com/wp/wp-conten...e-x/googlex.htm Is it possible to achieve that effect using a navbar (marked up as a list), and using CSS rather than javascript? Please provide examples / links. Sup /css/. Here is the temporary build of my page. The links are dead on purpose: http://www.mindwallpictures.com/files/temp/mediachef If you click on "services" you'll see a drop down list appear. I have mouseovers on these links which make an image appear toward the top of the page. "web&graphic, film&video, etc..." However, the links for 'portfolio', 'about us' and 'contact us' should also have this same mouseover effect. But they do not work. I believe this is a problem with my css and not the javascript, because when I swap out a mouseover command of one of the non-working links for one of the working links, the image will appear. It seems to not want to toggle those particular divs. Here is the javascript code: Code: <script language="Javascript" type=""> <!-- function toggleDiv(id,flagit) { if (flagit=="1"){ if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } else if (flagit=="0"){ if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } //--> </script> The related css: Code: #webgraphic {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/webgraphic.gif);} #filmvideo {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/filmvideo.gif);} #musicaudio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/musicaudio.gif);} #photography {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/photography.gif);} #portfolio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/portfolio.gif);} #about {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/about.gif);} #contact {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/contact.gif);} and the xhtml: Code: <div class="sidemenu"> <div id="links"> <div><a href="/">home</a></div> <a href="javascript:animatedcollapse.toggle('services')">services</a></div> <div id="services"> <a href="#" onmouseover="toggleDiv('webgraphic',1)" onmouseout="toggleDiv('webgraphic',0)">web & graphic</a><br /> <a href="#" onmouseover="toggleDiv('filmvideo',1)" onmouseout="toggleDiv('filmvideo',0)">film & video</a><br /> <a href="#" onmouseover="toggleDiv('musicaudio',1)" onmouseout="toggleDiv('musicaudio',0)">music & audio</a><br /> <a href="#" onmouseover="toggleDiv('photography',1)" onmouseout="toggleDiv('photography',0)">photography</a> </div> <div id="links"> <div><a href="#" onmouseover="toggleDiv('portfolio',1)" onmouseout="toggleDiv('portfolio',0)">portfolio</a></div> <div><a href="#" onmouseover="toggleDiv('about',1)" onmouseout="toggleDiv('about',0)">about us</a></div> <div><a href="#" onmouseover="toggleDiv('contact',1)" onmouseout="toggleDiv('contact',0)">contact us</a></div> </div> </div> It acts as if it's a problem with syntax, but I don't see any errors and my code is validated. Any help would be greatly appreciated. Thanks. I have a side menu I'm trying to work with. using this css code for my menu http://www.dynamicdrive.com/dynamicindex1/popit.htm It's doing what I want it to however, I have 2 questions. 1. When the mouse is over the link and the menu pops up to the right, how can I make the text larger? I can't seem to figure this out as I'm new to css. 2. I would like the popup menu to show more to the right, off the main set of links. How would I go about this. The page above in the example has all the code I used. Look at the demo and you see. I have the main links resized fine but can't get the linkset text larger thanks in advance.. any help would be much appreciated I know how to make the background of a link change but how do you do it if it isnt a link? in css... I've been trying to combine an image link with a mouse over cursor I made. I was created an image that led to another URL. I wanted to have a mouse over cursor appear when you put your cursor over it so it could show the extra cursor image with it(I hope that made sense). This is what I've done so far(The smile image in the code below isn't the real image I'm going to use. I'm just using it as an example in this case): ----- Code: <html> <head> <style type="text/css"> .smile { cursor:url(http://www.quackit.com/pix/smile.gif),auto } </style> </head> <body> <h3 class="smile">"<a href="http://www.4m4life.com"> <img src="http://i107.photobucket.com/albums/m305/Red_psn/newsigggg2.jpg" width="530" height="126" alt="banner" border="0" /> </a>"</h3> </body> --- So, what I end up getting is the image link working correctly, but the mouse over cursor won't appear the way it should, it only displays the pointer on it because it's a link? Is there a way to disable the pointer in the code I gave so the mouse over image will appear instead? It seems like the mouse over image(the smile which I added for an example) will only appear in the quotation marks no nowhere else on the image link... I usually don't ever ask for help, but since I'm VERY new to HTML and CSS, I will now please ask for some help. X-D Anyway, help would be much appreciated -Red Hi, I have made a simple table in html, with mouseover on the rows to change the background colour. I also have onclick to take the user to the next page. What I really need to do is there a way of making a popup text, like the ones on this site's topic view. I have looked at the source code, and tried copying one <tr> row into a test html file, but no popup. Basically, my question is this: How can I make the table have a popup, for each <tr>, that shows non-dynamic text. Thanks in advance, Prism128 I used a simple mouseover menu i've done houndreds of times, but I cannot get it to work in IE6 for some reason. I do not know what the problem is. Here is the page: (URL address blocked: See forum rules) Here is he css file: (URL address blocked: See forum rules) Anyone got any clue how to fix this? -Chris Hi, I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change: Code: /* Common elements */ .row1 { background-color: #F5F9FD } .row2 { background-color: #DFE6EF } .row3 { background-color: #EEF2F7 } .row4 { background-color: #E4EAF2 } I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row. Code: <td class="row4" onmouseover='window.status="{$info['name']}"; this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">; </td> </span></td> Thanks, Prism128 PS: The iOver and iOut (in the second code) are colour references in a php file Hello This is displaying properly and working properly in Internet explorer but won't even display in Mozzilla: Code: <A class=a2 HREF="data.html"> </A Heres part of the css.style sheet Code: .a2 { color: black;font-size: 0pt; text-decoration: none; border-bottom-style: ; width : 100px; height:50px } .a2:link { background-image: url(oneb.bmp); } .a2:visited { background-image: url(oneb.bmp); } .a2:hover { background-image: url(three.bmp); } .a2:active { } Does anybody know what the problem is? Thanks. Does anybody knows how to change the bgcolor of a box when we hover the mouse over it? Go http://www.avocadolite.com/v9/ to get what i mean. In this case the avocado's bgcolor is green, i think. http://tampabay-online.org/johnruss...05-02-25/03.php That image is an imagemap and I would like to have text appear on the right (on mouseover) saying that you can look at the details of the work if you click on it. I would like the text added to the Code: <div id="contentright"> </div> Is this something I can do with css? Thanks Hi, I own WNV2 (offline atm click here to see preview) and I am trying to remove all tds trs and tables from my site. To do this need to change my mysql database row printout to css rather than the trs. I want to have the same efffect as Spoono (look at "fresh Meat" on their main page). Anyhelp would be appreciated. Thanks hi folks, i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution. i have this code: Code: <p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products </a></p> ... which makes the grey-colored word 'products' appear brown when the mouse is over it. thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on? any advice would be greatly appreciated I'm trying to scroll a div when the mouse is over the div. the div has the auto value for the overflow property. Is this possible and if so could someone help me out on how to do it? I was thinking something using the javascript document.getelementbyId() but i can't figure out what property to use. Thanks I'm trying to use the CSS hover state that I found on CSS Ninja, but for some reason when I hover over the images, they keep bumping upward. I've gone line by line trying to figure out which one it is, and I think it's the position:absolute line under a.feature01 .overlay01 .caption01; however, I can't get it to stop doing it even if I change the position to relative, fixed, etc. I ran it through the CSS validator as well and got no errors. Here is the CSS code Code: a.feature01 { display: block; position: relative; } a.feature01:hover .overlay01 { position: absolute; width: 185px; height: 130px; } a.feature01 .overlay01 .caption01 { position: absolute; height: 30px; line-height: 30px; width: 100%; text-indent: -9999em; color: #000; font-size: 11px; bottom: 0; overflow: hidden; } a.feature01:hover .caption01 { text-indent: 10px; background: rgb(255,255,255); /* for browsers that know rgba */ background: rgba(255, 255, 255, 0.75); } I am having trouble with my CSS mouse over links. XHTML and CSS3 both validate. However the large image for the mouse over isn't showing. I have check everything I can think of and still am totally unable to figure it out. It has been years since I have built a web page and am trying again so this site has not been published as of yet but is still accessible to look at. Below is the link to my site and the external CSS style sheet. I also have CSS code on the XHTML page as well. Could someone please take a look and see what I am over looking? Thank You Selena I made a mistake.. I'm not a student. simplyselena.com and external style is simplyselena.com/css/styles.css Sorry the above is the only way I could put url in not allowed to post url's as I am a new user account. |