<img> 태그 위로 마우스를 가져 가면 어떻게 표시 할 수 있습니까?

Question

다른 <img> 태그 위에 마우스 커서가 오면 버튼 (이미지 또는 background-image이있는 div)을 표시하고 싶습니다. 이미지의 폭은 고정되어 있지만 높이는 변경할 수 있습니다.

이의 예는 다음과 같습니다

I이 사용하는 jQuery를 또는 순수 JS가 할 수있는 방법은?

Answer 1

CSS는 :

div { 
    position: relative; 
    bottom: 30px; 
    left:50%; 
    z-index:1000; 
    opacity:0; 
} 

JQuery와 :

$("img").hover(function(){ 
    $("div").css("opacity",1); 
},function(){ 
    $("div").css("opacity",0); 
}); 

일 나머지 자신을 알아.

좋은 튜토리얼 : http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Answer 2

jQuery 호버 방법을 살펴보십시오. 아마 오프 스크린에서 원하는 위치로 버튼을 움직이는 것과 관련이 있습니다. css z-index를 사용하여 객체를 다른 객체 위에 배치 할 수 있습니다.

Answer 3

왜 여기 JS?

HTML :

<div class="image"><div class="inner"><button>Hello</button></div></div>​ 

CSS :

.image { 
    background-image: url(http://placehold.it/350x150); 
    width: 350px; 
    height: 150px; 
    position: relative; 
} 
​.image .inner { 
 display:none; 
 position: absolute; 
 top: 60px; 
 left: 100px;     
} 
.image:hover .inner { 
 display: block;    
} 
​ 

DEMO

DEMO with transition

Answer 4

죄

는 간단한 CSS입니다 CE 당신은, BTW ... 당신은 단지 JQuery와 사용하여이 작업을 수행 할 수 여기 a 태그의 필요를

$('#buttonId').css("position", "absolute"); 
$('#buttonId').css("bottom","0"); 
$('#buttonId').css("cursor","hand"); 
$('#buttonId').css("cursor","pointer"); 
$('#buttonId').css("margin","0 auto"); 
$('#buttonId').parent().css("text-align","center");​​​​​​​​​​​​​ 

을 언급하지 않습니다. 손 모양 커서를 원하면 cursor 속성을 사용하십시오.