How Do I Get This Menu To Stay Top Right Of The Image On Hover? - Css, Jquery

You can see the implementation here. When you hover over any of the two big images, you see a little 'menu' set of icons appear. They are absolutely positioned right now. I want t

Solution 1:

Something like this might work for you: Example

JavaScript used:

$('.overview li').mouseenter(function() {
    $(this).append($('#tool'));
    $('#tool').css('display', 'block');
}).mouseleave(function() {
    $('#tool').css('display', 'none');
});

HTML used:

<ulclass="overview" ><li><imgsrc="http://fiwishop.com/feedback/images/red-stripe.jpg" ></li><li><imgsrc="http://fiwishop.com/feedback/images/red-stripe-bw.jpg" ></li><li><imgsrc="http://fiwishop.com/feedback/images/red-stripe-red.jpg" ></li></ul><divstyle="clear:both"></div><divid="tool">[ ] [_] [X]</div>

CSS used:

.overviewli{
    width:200px;
    height:135px;
    background-color:#666;
    float:left;
    margin:10px;
}
.overviewliimg{
    width:200px;
    position:absolute;
}
#tool{
    width:75px;
    background-color:#eee;
    display:none;
    position:relative;
    left:120px;
    top:5px
}

Solution 2:

check into jquery ui position... http://jqueryui.com/demos/position/

very handy and it works pretty good.

Solution 3:

To the css you should add the top and right values so it can place them where you want them.

#edit-image-navul {
    display: inline;    
    margin: 20px0 auto; /* top, right, bottom, left */position: absolute; 
    z-index: 200;   
}

Also, you may want to look into using mouseenter and mouseleave instead of hover (which behind the scenes uses mouseover and mouseout)

$('.element').mouseenter(function() {
    $("#edit-image-nav").css({ 'display' : 'inline' });
}).mouseleave(function(){
    $("#edit-image-nav").css({ 'display' : 'none' });
});

There is a reason to use mouseenter vs mouseout - it has to do with nested elements. You can see that here.

You can see the demos directly on mouseover and mouseenter.

Solution 4:

If you want to show menu on each image try this: CSS:

ul.overviewli {position: relative;}
 #edit-image-nav {positon: absolute; display: none; right: 5px;}

JS:

$(document).ready(function() {
    var imageNav=$("#edit-image-nav").remove();
    $("#slider-code .viewport .overview img").mouseenter(function(event) {
            imageNav.insertAfter(this).css({ 'display' : 'block' });
        } ).mouseleave( function(event) {
            imageNav.css({ 'display' : 'none' }).remove();
    });
});