我一直在尝试使悬停在箭头上时淡出此文本.没有运气,只能坚持一小会儿,不胜感激.
另外,如果我要从按钮的左到右淡入淡出,那会包括Js吗？
.fa-long-arrow-alt-left { display: none; position: absolute; top: 3vh; left: 3vw; z-index: 99; border: none; outline: none; background: none; color: black; cursor: pointer; padding: 15px; Font-size: 18px; }.return-text { visibility: hIDden; wIDth: 120px; color: black; text-align: center; justify-content: center; /* position the tooltip */ position: relative; z-index: 1; left: 20%;}#return:hover { color: red;}#return:hover .return-text { visibility: visible; Transition: 1s ease-in-out;}<HTML><head> <Title>Hector's Portfolio</Title> <link rel="stylesheet" type="text/CSS" href="CSS/style.CSS"> <!-- linking social icons --> <link rel="stylesheet" href="https://use.Fontawesome.com/releases/v5.7.2/CSS/all.CSS" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStJsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"></head><body><button ID="return" ><span >Return</span> </button></body>您已经设置了过渡,因此只需添加不透明度即可.
至于从左到右的动画,我相信您可以使用CSS动画来做到这一点,请看以下示例：
CSS fade left to right
.fa-long-arrow-alt-left { display: none; position: absolute; top: 3vh; left: 3vw; z-index: 99; border: none; outline: none; background: none; color: black; cursor: pointer; padding: 15px; Font-size: 18px; Transition: 0.3s ease;}.return-text { visibility: hIDden; opacity: 0; wIDth: 120px; color: black; text-align: center; justify-content: center; /* position the tooltip */ position: relative; z-index: 1; left: 20%;}#return:hover { color: red;}#return:hover .return-text { visibility: visible; opacity: 1; Transition: 1s ease-in-out;}<HTML><head> <Title>Hector's Portfolio</Title> <link rel="stylesheet" type="text/CSS" href="CSS/style.CSS"> <!-- linking social icons --> <link rel="stylesheet" href="https://use.Fontawesome.com/releases/v5.7.2/CSS/all.CSS" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStJsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"></head><body> <button ID="return" ><span >Return</span> </button></body>以上是内存溢出为你收集整理的html-悬停显示工具提示 全部内容，希望文章能够帮你解决html-悬停显示工具提示 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）