I want to have div.segment:hover work when hovering over div.inner:hover. Can I do this, or am I overreaching what can be done? Haven't been able to work it out.
<style>
/**********BOX HOVER*/
.outer {
float: left; border: .1em solid #000; padding: .2em; width: 250px; height: 180px; margin: 1em 1em 0 0; color: #000;
}
div.outer:hover {
background-color: #696969; background-image: none;
}
.inner {
border: .2em solid #ccc; height: 152px; padding: .3em; overflow: auto; background-color: #fff;
}
div.inner:hover {
background-color: #f5f5f5; color: #2f4f4f;
}
div.inner a {
color: #000; text-decoration: underline;
}
div.inner:hover a {
color: purple;
}
div.inner a:visited {
text-decoration: line-through; color: #808080;
}
div.inner a:hover {
color: #900; text-decoration: underline overline;
}
div.inner a:active {
text-decoration: line-through;
}
.segment {
color: #000; font-weight: 800; text-align: center; border-left: .2em solid #2f4f4f; border-right: .2em solid #2f4f4f; border-bottom: .1em solid #2f4f4f;
padding: 0 .3em; background-color: #dcdcdc; margin-bottom: .5em;
}
div.segment:hover {
background-color: #afafaf;
}
dl, dt, dd, li {
margin: 0; padding: 0;
}
ul {
margin: 0;
}
li {
margin-bottom: .4em;list-style: none;
}
</style>
<body>
<div class="outer">
<div class="inner">
<div class="segment">
robots.txt
</div>
<ul>
<li>
<a href="">
robots.txt
</a>
</li>
<li>
<a href="">
SEO Rank
</a>
</li>
<li>
<a href="">
Site Wizard
</a>
</li>
<li>
<a href="">
AKA Marketing
</a>
</li>
</ul>
</div>
</div>
</body>
<EDIT>
div.inner:hover div.segment {
background-color: #afafaf;
}
Got it.
</EDIT>
