Question

在之前的一个问题中，我问过如何制作一个＆＃34;光标镜，＆＃34;意味着如果您的光标要在站点的顶部移动，则光标的单独反转图像将在站点的底部沿相反方向移动。链接到问题here。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以这样做：

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

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

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

Answer 2

一种选择是使用adjacent sibling selector ~，以便在悬停在.upside-down上时控制top-half-black的样式。 E.G：

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

<强> UPDATE ...

根据您的评论，您可以使用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>

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建议不要使用它，因为它是“实验技术”。

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

3 个答案: