Change a siblings style based on a sibling hover - css

Question

I'm trying to change the style of a input only if the input is focused and the sibling is hovered like so:
form#search {
display: inline-block;
position: relative;
min-width: 305px;
height: 2.500em;
width: 100%;
margin: 10px 20px;
vertical-align: middle;
}
form#search input {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 100%;
width: 100%;
padding: 0.5em 5.33em 0.6em 0.33em;
margin: 0 -2px 0 0;
border: 2px solid #f2f2f2;
}
form#search input:hover,
form#search input:focus {
border: 2px solid #005785;
outline: none;
}
form#search button {
position: absolute;
right: 0px;
width: 5em;
height: 100%;
background-color: #005785;
color: #fff;
margin: 10px auto;
padding: 0.33em 1em 0.33em 1em;
outline: none;
border: none;
margin: 0;
cursor: pointer;
}
form#search button:hover,
form#search button:focus {
background-color: #003550;
}
form#search input:focus ~ button:hover ~ input:focus {
border: 2px solid #003550 !important;
}
<form id="search">
<input type="text">
<button type="submit">Search</button>
</form>
More specifically this line:
form#search input:focus ~ button:hover ~ input:focus
Anyone have any idea how to fix this? It doesn't appear to work and I have no idea as the logic seems sound.
Thanks,
Jamie

Answer 1

The general sibling selector (~) will only search forward in the DOM.
To achieve your desired result you would have to rearrange the order of the button and input.
Your selector would then become:
form#search button:hover ~ input:focus
Since there are only two elements, you could use the immediate sibling selector (+) instead:
form#search button:hover + input:focus
form#search {
display: inline-block;
position: relative;
min-width: 305px;
height: 2.500em;
width: 100%;
margin: 10px 20px;
vertical-align: middle;
}
form#search input {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 100%;
width: 100%;
padding: 0.5em 5.33em 0.6em 0.33em;
margin: 0 -2px 0 0;
border: 2px solid #f2f2f2;
}
form#search input:hover,
form#search input:focus {
border: 2px solid #005785;
outline: none;
}
form#search button {
position: absolute;
right: 0px;
width: 5em;
height: 100%;
background-color: #005785;
color: #fff;
margin: 10px auto;
padding: 0.33em 1em 0.33em 1em;
outline: none;
border: none;
margin: 0;
cursor: pointer;
z-index: 1;
}
form#search button:hover,
form#search button:focus {
background-color: #003550;
}
form#search button:hover ~ input:focus {
border: 2px solid red !important;
}
<form id="search">
<button type="submit">Search</button>
<input type="text">
</form>
I've also added a z-index to the button to place it in front of the input.