为什么css转换不能与js一起使用
为什么css转换不能与js一起使用
提问于 2020-05-05 07:22:41
<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;
}
我尝试了所有的方法，也搜索了很多，但我不知道问题在代码中的哪里，主要是我使用了hover的这个转换，它对我很有效。我正在使用位置相对和绝对，谢谢你的帮助
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-05 07:28:01
可能是这样的：
.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不理解//，只有SCSS理解。
此外，您不能在display: none和display: block之间进行转换。请改用opacity。
根据它所处的位置，您可能还想切换警告消息的pointer-events。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61607830
复制相关文章
相似问题
腾讯云开发者
