How do I get this menu to stay top right of the image on hover? - CSS, jQuery

Question

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 them to function like a menu - so when you hover over the image, they appear to the top right of each of the images, i.e. when you hover over the left image, it appears in the top right corner of the left image, and when you hover over the right image, it does the same.

Also note that the images are on a carousel, so when you click next, the menu should disappear and you should get the menu on the next image that shows up too. Also why are those black dots appearing, is it because the images are list items?

How do I get rid of them?

Also, when you hover over the menu, it shouldn't flicker like it does now - and should allow me to be able to customize it like a menu (i.e. when they hover over each of the images, I can do an image swap to make it feel like a menu (even after one of the icons/buttons has been pressed).

Here is the requisite code....HTML:

<div id="slider-code">
    <a class="buttons prev" href="#"></a>
    <div class="viewport">
        <ul class="overview">           
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-bw.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>            
            <li><img src="images/red-stripe-dark.jpg" /></li>
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>
            <li><img src="images/red-stripe-dark.jpg" /></li>           
        </ul>

        <div id="edit-image-nav">
            <ul>
                <li><img src="images/comment-icon.png" /></li>
                <li><img src="images/paint-icon.png" /></li>
                <li><img src="images/delete-icon.png" /></li>
            </ul>
        </div>

    </div>
    <a class="buttons next" href="#"></a>
</div>

CSS:

#edit-image-nav {
    display: none;
}

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

#edit-image-nav ul li {
    float: left;
}

JS

$(document).ready(function() {
    $("#slider-code .viewport .overview img")
        .hover(function() {
            $("#edit-image-nav").css({ 'display' : 'inline' });
        }, function() {
            $("#edit-image-nav").css({ 'display' : 'none' });
    });

});

Thanks.

Answer 1

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

very handy and it works pretty good.

Answer 2

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.

Answer 3

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();
    });
});

Answer 4

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
}