cjy8s@yahoo.com Posted December 10, 2011 Share Posted December 10, 2011 I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Can this be done without Javascript? Or is there a way with CSS3 to have the element that's being hovered over and another element change while interacting with only the list/menu elements? I would prefer a CSS solution if possible. Thank you in advance! Or even to put CSS inside Javascript? like have an if then statement for the text that says if there is a rollover event on the text/tables then it initiates the CSS :hover for the background?I want to use CSS rather than Javascript as much as possible because 1) I understand CSS and not JS, and 2) JS is ugly. Thanks again!! Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted December 12, 2011 Author Share Posted December 12, 2011 I see a way to do this with Jquery, sort of, but again I dont know enough Javascript to even get by with :/ could someone help me pleeease??? Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2011 Share Posted December 12, 2011 CSS can only affect the element you're targeting and its descendents. Only Javascript can do what you want. Javascript can't interact with CSS :hover, you'll have to use mouseover and mouseout events to work with that. Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted December 14, 2011 Author Share Posted December 14, 2011 hmmmm... I see.... Well I know negative jack squat about javascript, although I am trying to learn it. Could someone show me how this could be done? Link to comment Share on other sites More sharing options...
Ingolme Posted December 14, 2011 Share Posted December 14, 2011 You should read the Javascript and try to learn some basics first. Lean variables, arrays, loops and functions. After that, you can start learning events. Move on to HTML DOM to be able to access and manipulate HTML elements. All of it is in the tutorial. Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted December 16, 2011 Author Share Posted December 16, 2011 How about something like this? <script language="Javascript"><!--function ShowPicture(id,Source) {if (Source=="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.… = "visible"}elseif (Source=="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.… = "hidden"}}//--></script><a href="http://yourwebsitepage.com" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Hove… Here To Show Image</a><div id="Style"><img src="The background image you were on about"></div> Its iffey, but could I get some critiquing? thanks tons! Link to comment Share on other sites More sharing options...
Ingolme Posted December 17, 2011 Share Posted December 17, 2011 This doesn't look like the kind of things taught in the W3Schools tutorials. You could simplify that function to this: function ShowPicture(id,show) { if (show){ document.getElementById("id").style.visibility = "visible" } else { document.getElementById("id").style.visibility = "hidden" }} Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted December 18, 2011 Author Share Posted December 18, 2011 Btw, Happy Birthday!And thanks tons! ill see what I can do. Im looking into multiple ways of doing this so i can better understand the 'logic' of it.Thanks! Ok so I tried to apply it, but im kinda "derp!" so it doesnt work. haha here it is: <!--function ShowPicture(id,show) { if (show){ document.getElementById("id").menu_blue.visibility = "visible" } else { document.getElementById("id").menu_blue.visibility = "hidden" }}elseif (Source=="0"){if (document.layers) document.layers[''+id+''].visibility = "hide"else if (document.all) document.all[''+id+''].menu_blue.visibility = "hidden"else if (document.getElementById) document.getElementById(''+id+'').menu_blue.… = "hidden"}}//--> <span id="menu_blue"><img src="Index_files/Images/menu_background.png"/></span><span><table id="menu_block" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><tr><th><a class="menu" href="Index_files/HTML/About_Me.html">About Me</a></th><th><a class="menu" href="Index_files/HTML/Contact.html">Contact</a></th><th><a class="menu" href="Index_files/HTML/Blog.html">Blog</a></th><th><a class="menu" href="Index_files/HTML/Portfolio.html">Portfolio</a></th></tr></table></span> Lemme know how derped this is. Thanks!Anything, Guys? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.