将图像放在div上时如何使div消失？

Question

在上一个问题中，我问过如何制作“光标镜像”，这意味着如果您的光标要在网站顶部四处移动，则光标的单独反转图像将在网站的底部。链接到问题here。

继续这段代码，如果上半部分的实际光标悬停在 div 上使其消失（使用 CSS 悬停状态），镜像光标如何在不使用 .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

您可以在整个文档上使用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 建议不要使用它，因为它是“实验性技术”。

Answer 3

一种选择是使用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) 找到镜像光标图像下 的元素并切换其类名：

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>