What is the best way to hide a div when an image is positioned on top of it?

Question

What is the best way to hide a div when an image is positioned on top of it?

Previously, I inquired about creating a "cursor mirror" where the movement of the cursor in the top section of a website would be mirrored in the opposite direction in the bottom section. You can find the original question here.

Expanding on that concept, if the real cursor in the top half hovers over a div and makes it disappear using CSS hover states, how could the mirrored cursor achieve the same effect in JavaScript without relying on the .mouseover event (as it's an image being placed)? The title might be a bit vague, but the issue is quite tricky to explain!


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>

javascript jquery html css mouseover

Answer 1

Answer №1

Here is a simple way to achieve this:

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

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

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

Answer 2

Here is a simple way to achieve this:

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

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

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

Answer 3

Answer №2

To create a simulation of a mouse move event for the inverse cursor over a specific element, you can utilize the onmousemove event on the entire document. Let's assume you want to trigger this event over the element with the ID hover.

// Store a reference to the element for faster access.
var hover = $("#hover");

// Monitor mouse movement anywhere on the document.
$(document).mousemove(function() {
    // Assuming you have the inverse cursor position stored in variables x and y.
    // You should have this information from your previous question.
    // Calculate 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 within #hover.
    if(diffX >= 0 && diffX <= hover.width() && diffY >= 0 && diffY <= hover.height()) {
        // Code inside this block will run if the inverse cursor is inside hover.
    }
    else {
        // Code inside this block will run if the inverse cursor is outside hover.
    }
}

While it may be more efficient to use .elementFromPoint() for this purpose, Mozilla warns against its usage as it is still considered "experimental technology".

Answer 4

To create a simulation of a mouse move event for the inverse cursor over a specific element, you can utilize the onmousemove event on the entire document. Let's assume you want to trigger this event over the element with the ID hover.

// Store a reference to the element for faster access.
var hover = $("#hover");

// Monitor mouse movement anywhere on the document.
$(document).mousemove(function() {
    // Assuming you have the inverse cursor position stored in variables x and y.
    // You should have this information from your previous question.
    // Calculate 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 within #hover.
    if(diffX >= 0 && diffX <= hover.width() && diffY >= 0 && diffY <= hover.height()) {
        // Code inside this block will run if the inverse cursor is inside hover.
    }
    else {
        // Code inside this block will run if the inverse cursor is outside hover.
    }
}

While it may be more efficient to use .elementFromPoint() for this purpose, Mozilla warns against its usage as it is still considered "experimental technology".

Answer 5

Answer №3

To customize the style of the elements .upside-down and .rightside-up when hovering over top-half-black, you can utilize the adjacent sibling selector ~. Here is an example:

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

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

If you want to change the class of the element underneath the mirrored cursor image using document.elementFromPoint(x, y), you can follow this approach:

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 6

To customize the style of the elements .upside-down and .rightside-up when hovering over top-half-black, you can utilize the adjacent sibling selector ~. Here is an example:

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

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

If you want to change the class of the element underneath the mirrored cursor image using document.elementFromPoint(x, y), you can follow this approach:

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>

What is the best way to hide a div when an image is positioned on top of it?

Answer №1

Answer №2

Answer №3

Similar questions

I'm puzzled by the error message stating that '<MODULE>' is declared locally but not exported

Can you provide the regular expression that will successfully match this specific string of text?

Decrease the font size of text using intervals in CSS

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

By executing array1.splice(1,1), I am deleting elements from array2 that was generated by copying array1 with array1.slice(0)

Using a function to identify and check dynamically added checkboxes

Removing an element from an array within MongoDB

Does an async function get automatically awaited if called in a constructor?

The jQuery.ajax request encounters issues within a Chrome extension

The design of the website is all over the place

Angularjs input type=number directive is malfunctioning

Automate Zoom join function with the help of puppeteer

What are some effective ways to slow down the image transitions in a Javascript slideshow?

Obtaining information from a local JSON file in AngularJS

Adaptive text sizing within Microsoft Outlook

Complete the dynamic form submission in a non-blocking manner

Need help positioning this HTML iframe on my webpage?

Retrieving details of a row in Codeigniter using a link with a foreach loop

Is there a way to display list items in rows of three?