Блог

На изображении видно, что когда я создаю эффект наведения курсора, внизу виден зеленый прямоугольник. когда я навожу курсор на желтое поле, я не хочу видеть зеленую часть, которая пересекается и которую можно увидеть по непрозрачности, Есть ли какой-нибудь способ вырезать пересекающуюся часть или не показывать ее?

это мой код:

 <div class="container">
  <div class="son">
    This is a title, while has hovering, I dont should see the green square under
  </div>
</div>

.container{
  height: 507px;
  width: 500px;
  background-color: rgba(168,207,69,1);
  border-radius: 32px;
  margin-top:50px;
  z-index:1;
}
.son:hover{

  background-color: rgba(255,207,69,0.5);

}
.son{
  z-index:2;
  position:relative;
  top:-20px;
  width: 300px;
  height:50px;
  background-color: rgba(255,207,69,1);
}
  

https://jsfiddle.net/7zm8ascx/

Просто используйте 100% непрозрачность в вашем .son:hover background-color . Это покроет зеленый прямоугольник. (Очевидно, вам нужно изменить значения цвета, чтобы получить тот же цвет, который у вас был, с 50% непрозрачностью.)

 .container {
  background-color: rgba(168,207,69,1);
  border-radius: 32px;
  height: 500px;
  margin-top: 50px;
  width: 500px;
}
.son:hover {
  background-color: rgba(254,230,166,1);
}
.son {
  background-color: rgba(255,207,69,1);
  height: 50px;
  position: relative;
  top: -20px;
  width: 300px;
}  

 <div class="container">
  <div class="son">
    This is a title, while has hovering, I dont should see the green square under
  </div>
</div>  

Лучшим способом добиться этого будет использование непрозрачного цвета ( rgba(255, 231, 161,1) в вашем случае).

Если вам не нужна непрозрачность, просто не используйте rgba и используйте rgb или шестнадцатеричные цвета.

просто обновите этот код

 .son:hover {
  background-color: #FFE7A2;
}