Member Avatar for Jory_1

Click Here
Click Here

You should be looking at the "#Partition_Left_Wrapper" id in the CSS code. It's the third one down.
I am following a tutorial, but the guy does not use a external stylesheet. Not sure if this affects css3 syntax/layout (relatively new here), but I can't seem to access the child block from the parent:

#parent_DIV_Wrapper:hover child_DIV {display:block;}

How exactly do I lay out the wrapper and child div to get the hide/display effect I am after?

Edited by Jory_1
  • 3 Contributors
  • 5 Replies
  • 383 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Jory_1

Dani AI

Generated

Brief practical answer: an external stylesheet is fine — the trouble here is usually the selector or the fact the parent has no hoverable area because its child is hidden. Give the wrapper a visible trigger or intrinsic size, use a correct descendant/child selector, and make sure your CSS is syntactically valid (units, semicolons) and loads in the expected order. As noted, file order and specificity matter; as demonstrated, adding a visible element to target fixes the empty-box hover problem.

A minimal, safe pattern (different names than the examples above):

<!-- HTML -->
<div class="menu" tabindex="0" aria-haspopup="true">
  <div class="menu-trigger">Open</div>
  <div class="menu-panel" aria-hidden="true">Hidden content</div>
</div>

<!-- CSS -->
.menu { display:inline-block; position:relative; min-width:120px; padding:8px; }
.menu-panel { display:none; position:absolute; top:100%; left:0; width:200px; border:1px solid #ccc; background:#fff; }
.menu:hover .menu-panel,
.menu:focus-within .menu-panel { display:block; }

Troubleshooting checklist: ensure the parent has size (padding/min-height) or a visible trigger so the pointer can target it; if the revealed panel is absolutely positioned, keep the parent position:relative so it stays attached; floats can collapse a parent — use a clearfix or overflow:auto; check for missing units like width:20 (invalid) or missing semicolons; watch selector specificity (IDs override classes) and the order of stylesheets.

Accessibility/edge cases: :hover won’t work on most touch devices — add :focus-within or a small JS toggle that updates aria-expanded/aria-hidden for screen readers and keyboard users. Looks like got it working after adding a hoverable element — that is the simplest, robust fix.

Recommended Answers

All 5 Replies

Member Avatar for Member #120589

Using an external stylesheet or style should make no discernible difference, unless there are naming conflicts, in which case it could - although the order in which you add files or style tags would be important in this case.

Generally this is the priority...

Inline style (inside HTML tag, e.g. span, p, li etc)
Style tags in head (<style>)
CSS file
(Browser default)

However, as mentioned if the CSS file is placed after the style tags, then elements may be overridden.

Member Avatar for Jory_1

@diafol
Ok...but how do I handle accessing the child div?

Member Avatar for Member #120589

Please paste your code/markup in the editor next time - don't provide links if you can help it.
Your html:

 <body class="Main_Body">
        <div id="Partition_Left_Wrapper">
                <div id="Partition_Left">
                        <p> Hello World! </p>
                </div>
        </div>

        <div id="Partition_Middle_Wrapper">
                <div id="Partition_Middle">
                        <p> Goodbye World </p>
                </div>
        </div>

        <div id="Partition_Right_Wrapper">
                <div id="Partition_Right">
                        <p> Hello Again World! </p>
                </div>
        </div>

</body>

Your css:

#body {
     margin: 50;
     padding:50;
     max-width:100%
     }


#Partition_Left{
                float:left;
                width:20;
                border:1px solid black;
                display:none;
                }

#Partition_Left_Wrapper:hover {                 
                              display:block;
                              }

#Partition_Middle{
                  float:left;
                  width:60%;
                  }

#Partition_Right{
                 float:left;
                 width:20%;
                 border:1px solid black;
                 }


#Partition_Right:hover{
                float:left;
                width:20;
                border:1px solid black;
                }

I'm not sure what you're trying to do with this css. You're not referencing any child divs at all.

Member Avatar for fannie.cats 
#Partition_Left_Wrapper span {display:block; width:100px; background:#6F6F6F; text-align:center; line-height:30px; color:#fff}   
#Partition_Left_Wrapper #Partition_Left p {display:none;}
#Partition_Left_Wrapper:hover span {display:none;}
#Partition_Left_Wrapper:hover #Partition_Left {                         display:block;
    float:left;
    border:1px solid black;
}
#Partition_Left_Wrapper:hover #Partition_Left p {display:block;}





<div id="Partition_Left_Wrapper">
        <span>try me</span>
        <div id="Partition_Left">
            <p> Hello World! </p>
        </div>
</div>

Well, the problem is that DIV is a empty box, you should put something can make it like a real box, cuz when you try to use a mouse to click or hover there should have a button or other can let you notice on it.

Else you can't really know where can touch or click it when you try to hover or click it with a event.

Member Avatar for Jory_1

I actually did catch the issue with the targetting by adding elements to hover over. Anyway's, good example. It's working now...mucho gracias amigo!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.