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


Tags: javascript,jquery,html,css

Problem :

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.



Solution :

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
}

    CSS Howto..

    How to add a gradient/filter in the image in CSS

    How to replace image on click and reset to original after exiting hover state

    Show just the necessary div when user clicks on a targeted div

    How to set background image for body tag using css?

    How to rotate + flip element with CSS

    How to scroll .list-group leaving navigation bar at top

    How to override css class without touching the HTML?

    how to display an image on small screens and videos on large screen in html

    How to apply last-child only for first nested li?

    How to set a CSS selector for links ( a Tag ) for a Class

    How to create rounded edge panel in ExtJS 2.1

    How to set image as a button in HTML & CSS?

    How to modify twitter bootstrap “.icon-bar” colors

    How to represent x and y in svg symbol

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How to align specific element to the right using :last-child pseudo

    disabling stylesheets to increase the speed of showing/hiding divs

    How to handle mouseover properly on a flipped div?

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    Chrome doesn't show the favicon

    How to use nth-child with only direct children?

    How to enable auto indentation in lists and list items?

    How to make the divider between two tbody elements moveable

    JavaScript how to get this html to read this css and organise my script into the table

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How to parameterize CSS selectors? [duplicate]

    How to make div scalable by using percentage in CSS

    css how to define a class for table to control the style of table rows

    Sidebar, Navigation and Content how to do it?