이 메뉴를 마우스를 올리면 이미지 오른쪽 상단에 머물게하려면 어떻게해야합니까? - CSS, jQuery

Question

implementation here을 볼 수 있습니다.

두 개의 큰 이미지 중 하나를 가리키면 작은 '메뉴'아이콘 세트가 나타납니다. 그들은 지금 절대적으로 위치합니다.

메뉴가 메뉴처럼 작동하기를 원합니다. 이미지 위로 마우스를 가져 가면 각 이미지의 오른쪽 상단에 나타납니다. 즉, 왼쪽 이미지 위로 마우스를 가져 가면 오른쪽 상단 모서리에 나타납니다. 왼쪽 이미지, 오른쪽 이미지 위로 마우스를 가져 가면 같은 효과를냅니다.

또한 이미지가 회전식에 있으므로 다음을 클릭하면 메뉴가 사라지고 다음 이미지에도 메뉴가 나타나야합니다. 또한 왜 검은 점들이 나타나는가? 이미지가 목록 항목이기 때문에 그렇습니까?

어떻게 제거합니까?

메뉴 위로 마우스를 가져 가면 현재와 같이 깜박 거리지 않아야하며 메뉴처럼 사용자 정의 할 수 있어야합니다 (예 : 각 이미지 위에 마우스를 올리면 할 수 있음). 이미지 스왑은 (아이콘/버튼 중 하나를 누르면 한 후에도) 메뉴처럼 느낄 수 있도록하기 위해 여기

이 필요한 코드 .... 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' }); 
    }); 

}); 

감사합니다.

Answer 1

뭔가가 당신을 위해 일 수 있습니다 사용 Example

자바 스크립트 :

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

HTML을 사용 :

<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를 사용 :

.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

JQuery와 UI 위치로 확인 ... http://jqueryui.com/demos/position/

매우 편리하고 꽤 잘 작동합니다.

Answer 3

CSS에 top 및 right 값을 추가해야 원하는 위치에 배치 할 수 있습니다.

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

또한, mouseenter 및 mouseleave 대신 hover을 (배후 mouseover 및 mouseout을 사용하는)

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

가로 마우스를 대 mouseenter 사용하는 이유가 사용을 조사 할 수 있습니다 - 그것은 중첩 된 요소와 관련이 있습니다. here을 볼 수 있습니다.

mouseover 및 mouseenter에 직접 데모를 볼 수 있습니다.

Answer 4

당신이 시도 각 이미지에 메뉴를 표시하려면이 :

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