Не работает комбинация селекторов .button:hover .input-text

Question

Не работает комбинация селекторов:

.button:hover .input-text {
    border-right: none;
}

<form class="form" action="#" method="POST">
    <input class="input input-text" type="text" name="email" placeholder="Эл. почта">
    <input class="input button" type="button" name="button">
</form>

/* Form
==========================*/

.input {
    height: 50px;
    padding: 10px;

    font-family: "PT Sans";
    font-size: 1rem;
    line-height: 1.4;

    border: 1px solid #707070;
}

.input:hover {
    border: 1px solid #353535;
}

.input:focus {
    outline: none;
}


/* Button
====================*/

.button {
    position: absolute;
    width: 70px;

    background: url("../img/icons/send-icon.svg") no-repeat;
    background-position: center;
    border-left: none;
}

.button:hover .input-text {
    border-right: none;
}

.button:hover {
    cursor: pointer;
}

Answer 1

.button:hover .input-text замените на .input.button:hover input.input-text
Должно сработать или же так .button.input-text:hover

Answer 2

Проблема в том, что Вы, скорее всего, пытаетесь менять стиль у предыдущего элемента, который является либо родительским либо соседним, но стоящим выше в разметке. Так CSS не работает (кроме трюков с псевдоклассом :focus-within).

Решения два:

Изменение разметки с последующим позиционированием элементов в нужном порядке через CSS (например, с помощью position или flex):

/* Form
==========================*/
.form {
  display: inline-flex;
  flex-direction: row-reverse;
}

.input {
  height: 50px; padding: 10px;
  font: 1rem/1.4 "PT Sans";
  border: 5px solid #707070;
}
.input:hover { border: 5px solid #353535; }
.input:focus { outline: none; }

/* Button
====================*/
.button {
  width: 70px;
  background: url("../img/icons/send-icon.svg") no-repeat center;
  border-left: none;
}

.button:hover + .input-text {
  border-right: none;
}

<form class="form" action="#" method="POST">
  <input class="input button" type="button" name="button">
  <input class="input input-text" type="text" name="email" placeholder="Эл. почта">
</form>

Использовать JS и обработчики (возможно inline-), для доступа к нужному элементу:

/* Form
==========================*/
.input {
  height: 50px; padding: 10px;
  font: 1rem/1.4 "PT Sans";
  border: 5px solid #707070;
}
.input:hover { border: 5px solid #353535; }
.input:focus { outline: none; }

/* Button
====================*/
.button {
  position: absolute;
  width: 70px;
  background: url("../img/icons/send-icon.svg") no-repeat;
  background-position: center;
  border-left: none;
}

<form class="form" action="#" method="POST">
  <input class="input input-text" type="text" name="email" placeholder="Эл. почта">
  <input class="input button" onmouseover="this.previousElementSibling.style.borderRight = 'none'" onmouseout="this.previousElementSibling.style.borderRight = ''" type="button" name="button">
</form>

БЛОГ НА HUSL

Не работает комбинация селекторов .button:hover .input-text

Ответы (2 шт):