CODEWITHSUNDEEP
css
Jamie Bonnett
Jamie Bonnett

Reputation: 3

Change a siblings style based on a sibling hover

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

Upvotes: 0

Views: 193

Answers (1)

Turnip
Turnip

Reputation: 36702

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.

Upvotes: 2

Related Questions