Question

我的问题可能看起来很奇怪，但我想知道是否有可能像这样做：我想在我的网站上添加一个文本，当有人将光标指向它时会消失，然后我想在褪色文本的位置出现一个超链接。如果光标远离文本，我也会喜欢相反的效果。我知道你可能不知道我的意思所以我做了一个快速（质量差）的视频，它有点显示我的意思

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

提前致谢。

Answer 1

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

＆＃13;

$(".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");
  });
});

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

希望这有帮助

褪色文字变成超链接？

1 个答案: