如何显示/隐藏我可以与之互动的图像？

Question

我有一个网站，我希望隐藏图像，链接或任何互动元素之类的内容，在悬停时会显示这些内容。

我目前有这个模型，我有两个图像相互重叠，当你滚动时，显示背景图像中的文字。我如何向显示我可以与之交互的div添加元素？

更新

我已经进一步将元素隐藏在圆形元素中，但仍然无法使元素自我约束并包含在背景的大小中。我已经尝试过调整其高度和宽度属性，但仍然无法将其正确定位。

    (function ($) {
    	"use strict";
        
        $( document ).on( "mousemove", function( event ) {
            $(".circle" ).animate({
                top: event.pageY-($(".circle").height()/2),
                left: event.pageX-($(".circle").width()/2)
            }, 0, "linear");
        });
        
    })(jQuery)
    body, html{
    background-image: url();
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: 100%;
    padding: 0;
    margin: 0;
      overflow: hidden;
    cursor: none;
}

.hide{
  opacity:0;
  color:orange;
  font-size:200px;
}

.tada {
  height: 110px;
  width: 540px;
  top: 131px;
  left: 368px;
  position: absolute;
  cursor: pointer;/* so you can tell if you actually click it */
  z-index: 50;
}


#BG{
      background-image: url(https://farm3.staticflickr.com/2904/14648139676_6a96f5fc58_h.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: 100%;
    padding: 0;
    margin: 0;
      overflow: hidden;
    cursor: none;
}
.overlay{
    background-color: rgba(255,255,255,0.8);
    height: 100%;
    border-radius: 50%;

}


.circle{
    width: 250px;
    height: 250px;
    position: relative;
    
    background-image: url(http://dailyrindblog.com/PeterLum/test.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;    
    border-radius: 50%;
}

#item{
  position:absolute;
  top:50%;
  left:50%;
}

.circle.full{
  width: 1000%;
  height: 1000%;
  transition: 250ms ease all;
}


.treasure{
        background-image: url(http://dailyrindblog.com/PeterLum/circle.png);
    background-attachment: fixed;
    background-position:center center;
    background-size: 250px 250px;
    background-repeat:no-repeat;
    height: 250px;
    width:250px;
    padding: 0;
    left:50%;
    top:50%;
    margin: 0;
   cursor:pointer;
      overflow: hidden;
      border-radius: 50%;

}
    <div id="BG">
    <div class="circle">
    <div class="overlay">
    <a href="www.google.com"><div class="treasure"></div></a>
    </div>
    </div>
    </div>

Answer 1

好的，这听起来有点奇怪，我可能需要一段时间，但我认为这可行。

所有文字都显示在.circle中，包括链接的“文字”。然后，在pointer-events: none上使用.circle。

绝对定位链接，当你点击它时，ta da！

（我希望这是有道理的。例如......）

(function ($) {
	"use strict";
    
    $( document ).on( "mousemove", function( event ) {
        $(".circle" ).animate({
            top: event.pageY-($(".circle").height()/2),
            left: event.pageX-($(".circle").width()/2)
        }, 0, "linear");
    });
    
})(jQuery)

.tada {
  height: 110px;
  width: 540px;
  top: 131px;
  left: 368px;
  position: absolute;
  cursor: pointer;/* so you can tell if you actually click it */
  z-index: 50;
}

body, html{
    background-image: url();
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    margin: 0 auto;
    height: 900px;
    width: 900px;
    padding: 0;
      overflow: hidden;
    cursor: none;
}

#BG{
      background-image: url(https://farm3.staticflickr.com/2904/14648139676_6a96f5fc58_h.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    height: 100%;
    padding: 0;
    margin: 0;
      overflow: hidden;
    cursor: none;
}

.overlay{
   /* background-color: rgba(255,255,255,0.4);*/
    height: 100%;
    border-radius: 50%;
}


.circle{
    width: 500px;
    height: 500px;
    position: relative;
    
    background-image: url(http://dailyrindblog.com/PeterLum/test.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;    
    border-radius: 50%;
}

#item{
  position:absolute;
  top:50%;
  left:50%;
}

.circle.full{
  width: 1000%;
  height: 1000%;
  transition: 250ms ease all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div id="BG">
     <div class="circle">

      <div class="overlay"></div>
    </div>
  
  <a class="tada" href="https://jsfiddle.net/Chris_Happy/3jbf7562/"></a>
</div>
</body>