Issue making a div affect another div with on hover

Question

I have a drop down menu in the form of a ul. I want to change the color of the text in "account-username" to blue when hovering over the drop down menu.

I have tried the following, but it does not affect it at all.

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

JSFIDDLE : https://jsfiddle.net/s136ayq6/2/

CSS

 .username-panel { width: 153px; height: 100%; float: left; } a.account-username { width: 144px; height: 100%; text-align: center; overflow: hidden; color: black; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 900; text-decoration: none; letter-spacing: .8px; display: block; text-indent: 1px; position: relative; left: 5px; display: flex; justify-content: center; flex-direction: column; opacity: .85; z-index: 99; } a.account-username:hover { transition: all .2s ease; opacity: 1; } a.account-username span { position: relative; } .account-username-dropdown { width: 154px; height: 100% auto; background-color: #F3F3F3; position: relative; left: 1px; top: 0px; /*border-bottom: 6px solid #AD93C5; border-left: 6px solid #AD93C5; border-right: 6px solid #AD93C5;*/ border-radius: 0 0 10px 10px; line-height: 23px; font-family: 'Open sans'; font-weight: 600; font-size: 14px; overflow: hidden; visibility: hidden; box-shadow: 0 3px 5px rgba(0, 0, 0, .35); transition: all 0.3s ease 0s; box-shadow: 0 0 5px 0px #1d1e29; float: left; } .account-username-dropdown:hover a.account-username { color: blue !important; } .account-username-dropdown ul { text-decoration: none; list-style-type: none; padding: 0px; margin: 0px; } .account-username-dropdown li { color: #282A36; padding: 6px 18px; cursor: pointer; opacity: .85; } .account-username-dropdown li:hover { background-color: #DAD9D9; opacity: 1; transition: all .2s ease; } .account-username-dropdown li a { color: #282A36; text-decoration: none; } .account-username-dropdown li a:hover { color: #282A36; text-decoration: none; } .username-panel:hover .account-username-dropdown, .account-username-dropdown li:hover>ul { visibility: visible; } .dropdown-footer { width: 154px; font-size: 11px; font-weight: 300; color: #1d1e29; text-align: center; padding: 3px 0px 10px 0px; } **HTML** 

 <div class="username-panel"> <a class="account-username" href="#"><span>TEXT TURN & STAY BLUE WHILE HOVERED OVER THE DROPDOWN NUMBERS CONTAINER BELOW</span></a> <div class="account-username-dropdown"> <ul class="username-dropdown"> <li><a href="#">1</li> <li><a href="#">2</li> <li><a href="#">3</li> <li><a href="#">4</li> <li><a href="#">5</li> </ul> <div class="dropdown-footer"> <a href="#">a</a> <a href="#">b</a> </div> </div> </div> 

Answer 1

The CSS code

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

doesn't work with the order of your HTML.

This way with the hover effect you can only affect a children.

So i added your CSS line with a small change to your code.

 .username-panel { width: 153px; height: 100%; float: left; } a.account-username { width: 144px; height: 100%; text-align: center; overflow: hidden; color: black; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 900; text-decoration: none; letter-spacing: .8px; display: block; text-indent: 1px; position: relative; left: 5px; display: flex; justify-content: center; flex-direction: column; opacity: .85; z-index: 99; } a.account-username:hover { transition: all .2s ease; opacity: 1; } a.account-username span { position: relative; } .account-username-dropdown { width: 154px; height: 100% auto; background-color: #F3F3F3; position: relative; left: 1px; top: 0px; /*border-bottom: 6px solid #AD93C5; border-left: 6px solid #AD93C5; border-right: 6px solid #AD93C5;*/ border-radius: 0 0 10px 10px; line-height: 23px; font-family: 'Open sans'; font-weight: 600; font-size: 14px; overflow: hidden; visibility: hidden; box-shadow: 0 3px 5px rgba(0, 0, 0, .35); transition: all 0.3s ease 0s; box-shadow: 0 0 5px 0px #1d1e29; float: left; } .account-username-dropdown:hover a.account-username { color: blue !important; } .account-username-dropdown ul { text-decoration: none; list-style-type: none; padding: 0px; margin: 0px; } .account-username-dropdown li { color: #282A36; padding: 6px 18px; cursor: pointer; opacity: .85; } .account-username-dropdown li:hover { background-color: #DAD9D9; opacity: 1; transition: all .2s ease; } .account-username-dropdown li a { color: #282A36; text-decoration: none; } .account-username-dropdown li a:hover { color: #282A36; text-decoration: none; } .username-panel:hover .account-username-dropdown, .account-username-dropdown li:hover>ul { visibility: visible; } .dropdown-footer { width: 154px; font-size: 11px; font-weight: 300; color: #1d1e29; text-align: center; padding: 3px 0px 10px 0px; } .username-panel:hover a.account-username { color: blue; } 

 <div class="username-panel"> <a class="account-username" href="#"> <span>TEXT TURN & STAY BLUE WHILE HOVERED OVER THE DROPDOWN NUMBERS CONTAINER BELOW</span> </a> <div class="account-username-dropdown"> <ul class="username-dropdown"> <li><a href="#">1</li> <li><a href="#">2</li> <li><a href="#">3</li> <li><a href="#">4</li> <li><a href="#">5</li> </ul> <div class="dropdown-footer"> <a href="#">a</a> <a href="#">b</a> </div> </div> </div> 

Update: Changed the snippet so it really answer your question and removed the !important because it's not needed.

Answer 2

Change the hover effect to be on the a tag and set a defined height and width to the a. From there you can set background colour and also the colour of the tex5.