Wie erreiche ich, dass dieses Menü bei Hover oben rechts im Bild bleibt? - CSS, jQuery

Question

Sie können die implementation here sehen.

Wenn Sie mit der Maus über eines der beiden großen Bilder fahren, wird ein kleines Menü mit Symbolen angezeigt. Sie sind jetzt absolut positioniert.

Ich möchte, dass sie wie ein Menü funktionieren - wenn Sie also mit der Maus über das Bild fahren, erscheinen sie oben rechts von jedem Bild, dh wenn Sie den Mauszeiger über das linke Bild bewegen, erscheint es in der oberen rechten Ecke von das linke Bild, und wenn Sie über das rechte Bild schweben, tut es das gleiche.

Beachten Sie auch, dass die Bilder auf einem Karussell sind. Wenn Sie also auf Weiter klicken, sollte das Menü verschwinden und Sie sollten das Menü auf dem nächsten Bild sehen, das ebenfalls angezeigt wird. Warum erscheinen diese schwarzen Punkte auch, weil die Bilder Listenelemente sind?

Wie kann ich sie loswerden?

Wenn Sie den Mauszeiger über das Menü bewegen, sollte es nicht wie jetzt flackern - und sollte es mir ermöglichen, es wie ein Menü anzupassen (dh wenn Sie über jedes der Bilder schweben, kann ich das tun) ein Bild Swap, um es wie ein Menü zu fühlen (auch nach eines der Symbole/Tasten gedrückt wurde)

Hier ist der erforderliche 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' }); 
    }); 

}); 

Danke.

Answer 1

Etwas Ähnliches könnte für Sie arbeiten: Example

JavaScript verwendet:

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

HTML verwendet:

<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 verwendet:

.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 
} 

Answer 2

Check in jquery ui Position ... http://jqueryui.com/demos/position/

sehr praktisch und es funktioniert ziemlich gut.

Answer 3

Zum css sollten Sie die top und right Werte hinzufügen, damit sie dort platziert werden können, wo Sie sie haben möchten.

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

Auch können Sie in mit mouseenter und mouseleave aussehen wollen statt hover (die hinter den Kulissen verwendet mouseover und mouseout)

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

Es gibt einen Grund MouseEnter- vs mouseout zu verwenden - es hat mit verschachtelten Elementen zu tun. Sie können das here sehen.

Sie können die Demos direkt auf mouseover und mouseenter sehen.

Answer 4

Wenn Sie möchten, auf jedem Bild Menü zeigen versuchen Sie dies:

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