почему переход css не работает с js

Question

<button  className={this.state.isSaveDraft===true? 
                     "cts_not_allowed stepper_btn_back" : "stepper_btn_back"} onClick={
                        this.state.isSaveDraft===false && this.approval_submitHandler}  >
                        Update An
                        <p className='warning_message' >You have changed Metadata, please re calculate pre-opso</p>
                     </button>

.cts_not_allowed{
// pointer-events: none;
cursor: not-allowed !important;
position: relative;
transition: width 2s;

}
.warning_message{
    display: none;
    transition: 0.9s ease-in-out;
}
.cts_not_allowed:hover .warning_message{
    display: block;
    position: absolute;
    bottom: 3vw;
    right: 1vw;
    // background-color: #ffffff;
    border: 1px solid #ffffff;
    width: 30vw;
    color: red;


}

Я пробовал все, также много искал, но не знаю, где проблема в коде, в основном я использовал этот переход с наведением, и он работает для меня, я использую относительное положение и абсолютное спасибо для помощи

Answer 1

Наверное, примерно так:

.cts_not_allowed {
  /* pointer-events: none; */
  cursor: not-allowed !important;
  position: relative;
  transition: width 2s; /* is this used anywhere? */
}

.warning_message {
  position: absolute;
  bottom: 3vw;
  right: 1vw;
  /* background-color: #ffffff; */
  border: 1px solid #ffffff;
  width: 30vw;
  color: red;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-in-out;
}

.cts_not_allowed:hover .warning_message {
  opacity: 1;
  pointer-events: auto;
}

Обратите внимание, что комментирование в CSS работает только с /* ... */. CSS не понимает //, понимает только S CSS.

Также вы не можете переходить между display: none и display: block. Вместо этого используйте opacity.

В зависимости от того, где он находится, вы также можете переключить pointer-events вашего предупреждающего сообщения.