Изменить стиль элемента, когда наведите другой элемент не работает

Question

Я создал треугольник, и кажется, что обычный .something:hover .another{...} не работает на нем, кто-нибудь знает, в чем здесь проблема?

.actions {
  display: flex;
  margin-top: 20px;
  max-width: 260px;
}

.action-reg-button {
  font-size: 13px;
  font-weight: bold;
  color: black;
  box-sizing: border-box;
  padding: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: 150ms;
}

.action-log-button {
  font-size: 13px;
  font-weight: bold;
  color: white;
  box-sizing: border-box;
  padding: 25px;
  padding-top: 10px;
  padding-bottom: 11px;
  background-color: #0D5E5E;
  transition: 150ms;
  cursor: pointer;
}

.triangle {
  position: relative;
  width: 40px;
  margin-top: 12px;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 37.5px solid transparent;
  border-bottom: 0px solid transparent;
  right: -1px;
  border-right: 40px solid #0D5E5E;
  position: absolute;
  right: 0px;
  transition: 150ms;
  z-index: 20;
}

.action-reg-button:hover {
  color: #b2b2b2;
  cursor: pointer;
}

.action-log-button:hover {
  color: #ddd;
  background-color: #2e2e2e;
}

.action-log-button:hover .triange-left {
  border-right: 40px solid #2e2e2e!important;
}

<div class="actions">
  <p class="action-reg-button">Register</p>
  <div class="triangle">
    <div class="triangle-left"></div>
  </div>
  <p class="action-log-button" id="login-menu-button">Login</p>
</div>

// Больше текста
Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще несколько деталей.
Похоже, ваш пост в основном состоит из кода; пожалуйста, добавьте некоторые подробности.
Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще несколько деталей.
Похоже, ваш пост в основном кодовый; пожалуйста, добавьте больше деталей.

Answer 1

Проблемы

Селектор:

.action-log-button:hover .triange-left {...

будет означать, что этот несуществующий макет:

<p class="action-log-button" id="login-menu-button">
Login <div class="triangle-left"></div>
</p>

CSS стили имеют поток, каскадный, что означает если вы хотите воздействовать на тег, но при этом воздействовать на совершенно другой тег, то вы должны убедиться, что тег, на который он воздействует, следует или является потомком тега, с которым вы работаете.

Итак, взгляните на ваш макет, кажется, что зависание над .action-log-button никогда не повлияет на .triangle-left, потому что .action-log-button следует за .triangle, а .triangle - это тег для перехода к .triangle-left , В основном .tringle должен находиться в пределах .action-log-button или располагаться после .action-log-button.

---

Решение

Поместить HTML из .action-log-button прямо перед .triangle* и используйте этот набор правил:

.action-log-button:hover+.triangle .triangle-left {
  border-right-color: #2e2e2e;
}

* ^{Я знаю, что сидеть треугольником за кнопкой - это не то, что вам нужно, но читать по}

Это означает:

• над .action-log-button

• , затем go до + .triangle, то есть сразу после

• и их go внутри .triangle, чтобы достичь .triangle-left

• и изменить его border-right-color: #2e2e2e;.

• Обратите внимание на изменение от border-right: 40px solid #2e2e2e;

• , а также изменения в .triangle-left - отделяя наборы правил от сокращения, мы упрощаем сложность стиля, которая менее подвержена ошибкам.

Наконец, для исправления мест обмена треугольниками и кнопками мы будем использовать свойство flexbox: order В потоке по умолчанию из тегов DOM, порядок идет слева направо, затем сверху вниз. Если вы присваиваете flex-items (термин для тегов, которые являются прямыми потомками flex-container (термин для тега, который имеет display: flex)) число order, они займут эти позиции. Поэтому мы назначим .action-log-button order: 3 и .triangle order: 2. Несмотря на то, что он будет отображаться правильно при отображении на веб-странице, позиции в HTML будут такими, какими являются теги в действительности.

---

Демо

КСТАТИ теги HTML изменены на более семантические типы звука. Использование <p> или <div> в качестве кнопки действительно плохо. Это действительно, но это только худшее.

.actions {
  display: flex;
  margin-top: 20px;
  max-width: 260px;
}

.action-reg-button {
  font-size: 13px;
  font-weight: bold;
  color: black;
  padding: 10px 45px 10px;
  transition: 0.2s;
  order: 1
}

.action-log-button {
  font-size: 13px;
  font-weight: bold;
  color: white;
  padding: 10px 25px 10px;
  background-color: #0D5E5E;
  cursor: pointer;
  transition: 0.2s;
  order: 3
}

.triangle {
  width: 40px;
  margin-top: 12px;
  order: 2
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 0px solid transparent;
  border-right-width: 40px;
  border-right-style: solid;
  border-right-color: #0D5E5E;
  transition: 0.2s;
}

.action-reg-button:hover {
  color: #b2b2b2;
  cursor: pointer;
}

.action-log-button:hover+.triangle .triangle-left {
  border-right-color: #2e2e2e;
}

button {
  display: block;
}

.triangle-left {
  margin-top: -10px;
}

<fieldset class="actions">

  <button class="action-reg-button">Register</button>


  <button class="action-log-button">Login</button>

  <section class='triangle'>
    <div class="triangle-left"></div>
  </section>

</fieldset>

Answer 2

в одиночном css вы не можете сделать это:

.action-log-button:hover .triange-left {
  border-right: 40px solid #2e2e2e!important;
}

сначала вы должны сделать .triangle-left родительским блоком для кнопки входа в систему следующим образом:

<div class="actions">
     <p class="action-reg-button">Register</p>
     <div class="triangle">
       <div class="triangle-left">
           <p class="action-log-button" id="login-menu-button">Login</p>
       </div>
     </div>
</div>

секунду, сделайте .triangle-left фигуру, как вы хотите, в этом случае css должен выглядеть примерно так:

.triangle-left {
    border-bottom: 37px solid #0D5E5E;;
    border-left: 45px solid transparent;
    height: 0;
    width: 80px;
}

, и тогда вы можете навести курсор на этот блок:

.triangle-left:hover {
    border-bottom: 37px solid #2e2e2e;
}

теперь у вас такая же форма, но только один блок