如何让 div 在图像被覆盖时消失？

Question

在上一个问题中，我问过如何制作一个 "cursor mirror," 意思是如果您的光标在站点的顶部四处移动，则光标的单独反转图像将沿相反方向移动在网站的底部。 Link 提问 .

继续这段代码，如果上半部分的实际光标悬停在 div 上以使其消失（使用 CSS 悬停状态），mirror-image 光标将如何在不使用 .mouseover 事件的情况下使用 Javascript 实现相同的效果（因为它不是鼠标而是放置的图像）？抱歉，标题含糊不清，问题很难描述！

var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
  $img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}

$(".top-half-black").mousemove(function(event){
  var newY = $(this).height() - event.pageY - imgHeight;
  placeCursor(event.pageX, newY);
});

body{
    margin:0px 0px 0px 0px;
}

.top-half-black{
    background-color:black;
    width:100%;
    height:50%;
}

.bottom-half-white{
  position: relative;
}

#mirror-image{
  left: 0;
  top: 0;
  position: absolute;
  width: 17px;
  height: 25px;
}

.rightside-up{
    font-family:Arial;
    font-size:36px;
    color:white;
}

.rightside-up:hover{
   opacity:0;
}

.upside-down{
   font-family:Arial;
   font-size:36px;

  -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
      -ms-transform: scaleY(-1);
       -o-transform: scaleY(-1);
          transform: scaleY(-1); 
}

<div class="top-half-black">
   <div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
  <img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
   <div class="upside-down"> Blah blah blah</div>
</div>

Answer 1

你可以这样做：

        function hideDiv() {
            $(".upside-down").hide();
        }

        function showDiv() {
            $(".upside-down").show();
        }

        $(".rightside-up").hover(hideDiv, showDiv);

Answer 2

一种选择是使用 adjacent sibling selector ~ 以允许您在将鼠标悬停在 top-half-black 上时控制 .upside-down 的样式。例如：

.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
     opacity:0
}

var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
  $img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}

$(".top-half-black").mousemove(function(event){
  var newY = $(this).height() - event.pageY - imgHeight;
  placeCursor(event.pageX, newY);
});

body{
    margin:0px 0px 0px 0px;
}

.top-half-black{
    background-color:black;
    width:100%;
    height:50%;
}

.bottom-half-white{
  position: relative;
}

#mirror-image{
  left: 0;
  top: 0;
  position: absolute;
  width: 17px;
  height: 25px;
}

.rightside-up{
    font-family:Arial;
    font-size:36px;
    color:white;
}

/*.rightside-up:hover{
   opacity:0;
}*/
.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
  opacity:0
}

.upside-down{
   font-family:Arial;
   font-size:36px;

  -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
      -ms-transform: scaleY(-1);
       -o-transform: scaleY(-1);
          transform: scaleY(-1); 
}

<div class="top-half-black">
   <div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
  <img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
   <div class="upside-down"> Blah blah blah</div>
</div>

更新...

根据您的评论，您可以使用 document.elementFromPoint(x, y) 在镜像光标图像下找到元素 并切换其 class 名称：

var $img = $('#mirror-image'); var imgHeight = $img.height() / 2; function placeCursor(x, y){ $img.css({top: y + 'px', left: x+ 'px', position:'absolute'}); } $(".top-half-black").mousemove(function(event){ var newY = $(this).height() - event.pageY - imgHeight; var x = event.pageX, y = $(this).height() + event.pageY; $(".upside-down .hovered").removeClass("hovered"); placeCursor(x, newY); var mirrorEl = document.elementFromPoint(x, y); $(mirrorEl).addClass("hovered"); });

body{ margin:0px 0px 0px 0px; } .top-half-black{ background-color:black; width:100%; height:50%; } .bottom-half-white{ position: relative; } #mirror-image{ left: 0; top: 0; position: absolute; width: 17px; height: 25px; } .rightside-up{ font-family:Arial; font-size:36px; color:white; } .rightside-up span:hover{ opacity:0; } .upside-down span.hovered{ opacity:0; } .upside-down{ font-family:Arial; font-size:36px; -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top-half-black"> <div class="rightside-up"><span>Blah</span> <span>blah</span> <span>blah</span></div> </div> <div class="bottom-half-white"> <img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" /> <div class="upside-down"><span>Blah</span> <span>blah</span> <span>blah</span></div> </div>

Answer 3

您可以对整个文档使用 onmousemove 事件，然后检查反向光标是否在相关元素上。假设您想为 ID 为 hover.

的元素上的反向光标模拟鼠标移动事件

//Save a reference to the element for speed.
var hover = $("#hover");

//When the mouse moves anywhere.
$(document).mousemove(function() {
    //I assume you have the position of the inverse cursor in variables x and y.
    //I guesse the solution to your previous question should give you that. 
    //Save the distance between the inverse cursor and the top left corner of #hover.
    var diffX = hover.offset().left - x;
    var diffY = hover.offset().top - y;
    //Check if the shadow cursor is inside #hover.
    if(diffX >= 0 && diffX <= hover.width() && diffY >= 0 && diffY <= hover.height()) {
        //Things here will run if the inverse curser is inside hover.
    }
    else {
        //Thigs here will run if the inverse cursor is not inside hover.
    }
}

如果可以使用 .elementFromPoint()，代码会更整洁，但 Mozilla 建议不要使用它，因为它是 "experimental technology"。

如何让 div 在图像被覆盖时消失？

How to make div disappear when image is placed over it?

html

javascript

css

jquery

mouseover