html - 褪色的文字变成超链接？

我的问题可能看起来很奇怪，但我想知道是否可以这样做：
我想在我的网站上添加一个文本，当有人将光标指向该文本时该文本会消失，然后我希望在该文本消失的地方出现一个超链接。如果光标从文本移开，我也希望得到相反的效果。
我知道您可能不知道我的意思，所以我做了一个快速（质量差）的视频，有点说明了我的意思

https://www.youtube.com/watch?v=WK8dP5klI14&feature=youtu.be

提前致谢。

最佳答案

jQuery的一个非常基本的示例。

$(".hover-main").on("mouseenter", function(){
  $(".hover-text").fadeOut("fast", function(){
    $(".hover-link").fadeIn("fast");
  });
});

$(".hover-main").on("mouseleave", function(){
  $(".hover-link").fadeOut("fast", function(){
    $(".hover-text").fadeIn("fast");
  });
});

    .hover-main{
    width: 200px;
    text-align: center;
    position: relative;
    height: 50px;
    line-height: 50px;
    background: #000;
    color: #fff;
    cursor: pointer;
    }

    .hover-link{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-main">
      <div class="hover-text">
        Hover to see link
      </div>
      <div class="hover-link">
        <a href="http://google.com">Link to Google</a>
      </div>
    </div>

希望这可以帮助

关于html - 褪色的文字变成超链接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49210847/