0

Когда я навожу на текст, он должен меняться на другой , а также , в этом же блоке , должен появляться треугольник , я это сделал , но теперь с этим блоком твориться не понятное , в чем проблема, и еще почему-то треугольник этот появляется не в самом углу блока

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  left: 350px;
  top: 350px;
  color: #76cdd8;
}
<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation
  services.”</li>

2 ответа 2

1

треугольник этот появляется не в самом углу блока

У вас блок 400x250px, а "треуголник" позиционируете на 350x350, как думаете, почему он не в самом углу?

Раз вам нужно разместить его в правом-нижнем углу, воспользуйтесь right: 0; bottom: 0;, тогда он будет всегда в там углу находиться.

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  right: 0;
  bottom: 0;
  color: #76cdd8;
}
<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation services.”</li>

Но судя по тому как выглядит треугольник, он должен распологаться вся таки в правом верхнем углу..

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  right: 0;
  top: 0;
  color: #76cdd8;
}
<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation services.”</li>


навожу на текст, он должен меняться на другой

Этой механики я не вижу, помочь с этим не могу, увы я не Ванга.

5
  • Да , с треугольником я что-то натупил , у меня походу hover не хочет работать и я не знаю из-за чего у меня не меняется текст, как это исправить ? Они как-то вместе должны работать ( 20 мая 2022 в 8:30
  • А как текст меняется, за счёт чего?
    – De.Minov
    20 мая 2022 в 8:32
  • ну за счет hover 20 мая 2022 в 8:34
  • Я думал у вас содержимое текста меняется или ещё что-то, а по сути просто цвет. Вы ввели меня в заблуждение постановкой вопроса дважды)
    – De.Minov
    20 мая 2022 в 8:37
  • Прошу прощения ) 20 мая 2022 в 8:38
0

Вопрос решен

.firstblock__item2 {
   background-color: #fff;
   height: 250px;
   width: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-style: italic;
   font-size: 14px;
   line-height: 1.8;
   position: relative;
   &:hover{
      color: #76cdd8;
      &::after{
         content: '';
      position: absolute;
      border: 20px solid transparent;
      border-top: 20px solid #76cdd8;
      border-right: 20px solid #76cdd8;
      right: 0;
      top: 0;
      }
   }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.