Mr.Edition
New Member
so i was wondering if this where possible.i am building a navigation.\[code\]<nav id="navigation"> <div class="nav_buttons"><a href="http://stackoverflow.com/">home</a></div> <div class="nav_buttons"><a href="http://stackoverflow.com/system/">system</a></div> <div class="nav_buttons"><a href="http://stackoverflow.com/studies/">studies</a></div> <div class="nav_buttons"><a href="http://stackoverflow.com/approach/">approach</a></div> <div class="nav_buttons"><a href="http://stackoverflow.com/about/">about</a></div> <div class="nav_buttons"><a href="http://stackoverflow.com/contact/">contact</a></div></nav>\[/code\]but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same timei tried this\[code\] #navigation { text-align: center; height: 150px; padding-top: 100px; } .nav_buttons { display: inline; height: 40px; width: 100px; border-bottom: 1px solid black; margin-left: 20px; } #navigation a{ margin-right: 50px; font-size: 20px; text-decoration: none; color: black; } div.nav_buttons:hover { border-bottom: 1px solid #ff3300; } div.nav_buttons:hover a{ color:#ff3300; } \[/code\]but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.\[code\]div#parent_element:hover div.chil_element {color: red;}\[/code\]any suggestions doing it simply in CSS would be epic??