Avatar of coolispaul
coolispaulFlag for United States of America

asked on 

padding:5px 12px;

hi,

i have a nested unorderd list i.e parent-child. I have styling on the parent that is activated when hovered on with a mouse. This works fine.

However, I want this styling to remain when a child list item is hovered on too.
Is there anyway of traversing backwards so that a child list item knows its parent and therefore puts the styling on the parent?

Thanks
Web DevelopmentJavaScriptCSS

Avatar of undefined
Last Comment
TName
Avatar of TName
TName

Hi, have you tried something like this?:

var elem=getElementById('someID');  // you probably have the object already (e.g. "this")
var parentE=elem.parentNode;
parentE.style.width=elem.style.width;
Avatar of VirusMinus
VirusMinus
Flag of Australia image

is its a menu then using display: block and going further into a list item and its children will keep all styles applied to parents intact.

but otherwise i don't think there is css support for tracking down and element's parent.

there are :child pseudo selectors .. with limited browser support.. but i dont think w3c even has a draft spec for parent selectors.

im thinking javascript would be required to traverse the DOM and find the parent and then apply styles to it.
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

Hi ,

Yes, i tried using this function:

function parentstyle(elem) {
       var parentE=elem.parentNode;
       var parentEE=parentE.parentNode;
       parentEE.className="parent";
    }

which is called on the child list item with this:
onMouseOver="parentstyle(this);"

This works fine in Firefox, but doesnt work in IE or Opera.
Avatar of TName
TName

>This works fine in Firefox, but doesnt work in IE or Opera.

It works for me in IE6 and O9... (and of course FF)
Could you post (the relevant part of) your HTML?
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

Hi,

Yes , html below and css for the anchor tag background image i want to maintain:

<div id="primary_nav">
          <ul>
           <li><a href="index.html">Home</a></li>
             <li><a href="">products</a></li>
             <li><a href="">partners</a></li>
             <li><a href="">explore technologies</a></li>
             <li><a href="">Applications</a></li>
             <li><a href="">Purchase</a></li>
             <li><a href="">support &amp; services</a>
              <ul>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">Universal</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">V-series</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">Software product</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">software drivers</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);" id="child"><a href="">software development fdfvfev ef ef df</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);" id="child"><a href="">support services</a></li>
               <li class="last"><span></span></li>
              </ul>
             </li>
             <li><a href="">news &amp; events</a></li>
             <li><a href="">about us</a></li>
             <li><a href="">Contact Us</a></li>
             <li ><a href="">Training</a></li>
          </ul>
        </div>


div#primary_nav ul li a:hover, div#primary_nav ul li.parent a {
   background:url('images/primary-hover-back.gif') no-repeat top right;
   color:#fff
}
div#primary_nav ul li ul li a:hover, div#primary_nav ul li.parent ul li a {
  background-image:none
}
Avatar of Graham Hirst
Graham Hirst
Flag of United Kingdom of Great Britain and Northern Ireland image

you could posibbly do the following:

give the <ul> an id name e.g. <ul id="unOrderedList">

and in the style sheet do the following:

#unOrderedList > li {
...
put you styling in here
...
}

This should make all <li> under the <ul id="unOrderedList"> have the same css styling.
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

Hi,

Yes, but i only need to put the styling on when a list item is hovered over. If i did this wouldnt all list items have the same styling?
Avatar of TName
TName

Your js+html example still works for me, the parent <li> (the "grandparent" element ) - ("support & services") is being assigned the "parent" class.
I don't think the problem is the parentstyle() function...

Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

Hi Tname

Your right, it does work actually - thanks
However, i also have a function for IE that enables list items to have a class associated to them when they are hovered over(see below). This seems to stop the other function working - perhaps because two classes are being assigned. Is there a way around this?

sfHover = function() {
      var sfEls = document.getElementById("primary_nav").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
       }
    }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
ASKER CERTIFIED SOLUTION
Avatar of TName
TName

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of TName
TName

>>perhaps because two classes are being assigned. Is there a way around this?
>No, but because a function

Here I meant "no, not this is the reason" and not "no there's no way around this"   :)
Avatar of TName
TName

And do the same with the mouseout event of course:

sfHover = function() {
      var sfEls = document.getElementById("primary_nav").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++) {
           
            sfEls[i].onmouseover=function() {
                 if (this.name=='special') parentstyle(this);  
                   this.className+=" sfhover";
            }
           
            sfEls[i].onmouseout=function() {
                 if (this.name=='special') parentstyleout(this);   //  <---------------------------------------  HERE
                   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
       }
    }
     
if (window.attachEvent) window.attachEvent("onload", sfHover);
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

perfect thanks for your help
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

actually, sorry,

this doesnt seem to work in opera.

its fine in IE and firefox however.

Any ideas?
Avatar of coolispaul
coolispaul
Flag of United States of America image

ASKER

your original answer with name="special" seemed to work
thanks a lot
Avatar of TName
TName

Try "title" instead of  "name" :

if (this.title=='special') parentstyle(this);

and

 <li title="special" onMouseOver="parentstyle(this);"  ...



This should work with Opera too.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo