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

Question

我有一个网站，我想在其中隐藏图像、链接或任何交互元素等内容，悬停时会显示这些内容。

我目前有这个模型，其中有两个图像相互重叠，当您滚动时，会显示背景图像和其中的文本。我如何将元素添加到显示的 div 中以便我与之交互？

更新:

我在将元素隐藏在圆形元素中取得了一些进展，但仍然无法使元素 self 约束并包含在背景的大小中。我已尝试调整其高度和宽度属性的大小，但仍无法将其放置在正确的位置。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    (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)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    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%;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div id="BG">
    <div class="circle">
    <div class="overlay">
    <a href="www.google.com"><div class="treasure"></div></a>
    </div>
    </div>
    </div></code></pre>
</div>
</div>

Answer 1

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

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

绝对定位链接等，当你点击它时，哒哒!

(我希望这是有道理的。例如...)

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