Q: Display one element on top of another and disable mouse hover event on it Here is the fiddle: http://jsfiddle.net/5Lfqr/
The fiddle contains this html for a pair of images (thumb and big):
<div class="wrapper">
<a href="http://cssglobe.com/lab/tooltip/02/1.jpg" class="preview" title="">
    <img src="http://cssglobe.com/lab/tooltip/02/1s.jpg" alt="gallery thumbnail">
</a>
</div>

The idea is to display the big image when user hovers the mouse over the thumbnail.
This solution is very simple and works well except for one thing: originally, the offset of the big image is just to the right and down of the mouse position. I would like the big image to be over the thumb, so it should cover it. When I implement it, changing the offset like this:
xOffset = -100;
yOffset = -100;

the big image flickers. It's probably because the mouse cursor is over the thumb and at the same time over the big, so it can't decide what to do. The big image should become transparent for hover.
Is there a solution to it?

A: You could do it this way:
Place the preview behind the thumbnail and simply turn the thumbnail transparent on mouse-enter:
http://jsfiddle.net/nthDB/
$(this).css("opacity", "0");

You would then need to turn it make opaque when the mouse leaves: 
$("a.preview").mouseleave(function(e){
    $(this).css("opacity", "1")
});


However, this feels a little awkward to me... and also like not the best way to accomplish what you are doing. I think you can honestly do most of this (if not all) with CSS using pseduo elements. I will mess around with the fiddle a bit and see.
EDIT
With CSS only (at it's most basic). Wanted to use Pseudo elements.. but couldn't get it to work well with images (you could by using background images, but not sure if that is any better):
CSS only hover preview jsFiddle
The HTML
<div class="wrapper">
    <img src="http://cssglobe.com/lab/tooltip/02/1s.jpg" class="thumb">
        <img src="http://cssglobe.com/lab/tooltip/02/1.jpg" class="full">
</div>

The CSS:
.wrapper {
    position: relative;
    width: 100px;
    top: 150px;
    height:75px;
    margin: auto;
}

.thumb {
    position:relative;
    z-index:2;
}

.full {
    position:absolute;
    left:50%;
    margin-left:-200px;
    top:50%;
    margin-top:-150px;
    z-index:1;
    display:none;
}

.wrapper:hover .full {
    display:block;
}
.wrapper:hover .thumb {
    display:none;
}

You could also trigger it this way, if you want the preview to close when outside of the thumb area (not sure why you would):
.thumb:hover ~ .full {
    display:block;
}
.thumb:hover {
    opacity:0;
}


A: try this script, it looks good if you like it,
this.imagePreview = function(){ 
$("a.preview").hover(function(e) {

  $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1.jpg"}); 
}, function(e) {
   $("img").attr({src:"http://cssglobe.com/lab/tooltip/02/1s.jpg"}); 
});

};
$(document).ready(function(){
imagePreview();
});

