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;
      }
   }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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