Question

I have to create an ‘X’ that pops up over the top right div that is moused over. There are multiple divs that I need this to happen on, on the page. I have been able to achieve this on one div with the following very simple JQuery:

$(document).ready(function () {
    $(".imagetrigger").mouseover(function() {
        $(".xdiv").fadeIn();
    })

    $(".xdiv").mouseover(function() {
        $(".xdiv").show();
    })

    $(".imagetrigger").mouseout(function() {
        $(".xdiv").fadeOut();
    })
});

But, I don’t want to have to write this out over and over again for all the divs on the page. The xdiv would also have to move position to be positioned correctly with the other divs and I was thinking of achieving this by using .addclass to add a new class to the xdiv with the updated margin positioning.

I appreciate any help or guidance offered.

After some further investigation I was able to get it to work.
My JQuery now reads as following:

$(document).ready(function () {
  $(".preview").hover(
      function () {
        $(".xdiv",this).show();
      },
      function () {
        $(".xdiv",this).hide();
      }
  );

});

I am still not sure why using the .children selector wasn’t working and I will look into that, but the above work for me. Thanks for the help folks. I will be putting this in as the answer after the 6-8 hour cool down period is over.

Answer 1

Here is an example to what i think you need.

What it does is (on mouseover) shows the cross in the top-right corner and hides it on mouseleave. You could then have a click function on the cross in the corner to do something from there.

HTML

<div id="box1" class="clickable">
  <div class="cross"></div>

  YOUR CONTENT
</div>

CSS

div.clickable
  {
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative;
  }
div.cross
  {
    position:absolute;
    top:0px;
    right:0px;
    width:20px;
    height:20px;
    background-image:YOUR CROSS IMAGE
    display:none;
  }

Javascript (using jQuery Library)

$(".clickable").hover(
  function () {
    $(this).children(".cross").show();
  },
  function () {
    $(this).children(".cross").hide();
  }
);