Jump to content

Css :hover For Layered Elements?


cjy8s@yahoo.com

Recommended Posts

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

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

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...