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?
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.
@diafol
Ok...but how do I handle accessing the child div?
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.
#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.
@fannie.cats
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!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.