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:

<ul class="overview" >            
    <li><img src="http://fiwishop.com/feedback/images/red-stripe.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-bw.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-red.jpg" ></li>                
</ul>

<div style="clear:both"></div>
<div id="tool">[ ] [_] [X]</div>

CSS used:

.overview li{
    width:200px;
    height:135px;
    background-color:#666;
    float:left;
    margin:10px;
}
.overview li img{
    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-nav ul {
    display: inline;    
    margin: 20px 0 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.overview li {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();
    });
});