이미지 위로 가져 가면 가운데에 제목/alt 태그가 표시됩니다.

Question

이미지 위로 마우스를 가져 가면 제목 또는 alt 태그가 이미지 가운데에 표시됩니다 (페이드 인/아웃). 이미지는 불투명도가 낮아집니다.

나는 꽤 많이 둘러 보았지만 대부분의 자바 스크립트 플러그인은 툴팁을 만들었고 내가 찾던 것이 아니다.

의견을 보내 주셔서 감사합니다.

편집 : 언급하는 것을 잊어 버리면, 이미지는 간단한 ul 목록에 머물러 야하며 여분의 div 나 각 이미지 주위에 감싸는 것이 필요합니다. 그들은 또한 섀도우 박스 또는 유사품을 위해 rel attr을 사용할 것입니다.

1) 사업부에 이미지를 넣고이 DIV 클래스를 (예를 제공합니다 : 호버에 altHover)
2)

Answer 1

당신은

ul li img{ 
    position:relative; 
} 

.title{ 
    position:absolute; 
    z-index:1000; 
    top:50%; 
    bottom:50%; 
    right:50%; 
    left:50%; 
    width:100px; 
    border-radius:5px; 
    background:red; 
} 

(CSS이

$('ul li img').hover(
    function(){ 
     $(this).css('opacity','.5'); 
     var a = $(this).attr('alt'); 
     $(this).parent().append('<div class="title">' + a + '</div>'); 
    }, 
    function(){ 
     $(this).css('opacity','1'); 
     $(this).next().remove('.title'); 
    } 
); 

(jQuery를 확실히 개선 할 수있는 신속하고 더러운)

CSS처럼 뭔가를 할 수도 향상 될 수있다 ... 그러나 이것은 당신에게 아이디어를 준다)

예 :http://jsfiddle.net/dgKne/

Answer 2

이것은 당신이 jQuery를 사용하여이 문제를 해결에 접근 할 수있는 방법에 대한 일반적인 설명은 그냥 먼저 ALT 태그를 선택하고 변수에 저장 : var title = $("em").attr("title");
3) 같은 호버 기능에서, 새로운 사업부를 만들어 내 그 안에 사업부 및 인쇄 ALT 태그 맴돌고 :

$(".altHover").hover(
    function() { 
    $(this).append($("<div class='altText'>" + title +"</div>")); 
    }, 
    function() { 
    $(this).find(".altText").remove(); 
    } 
); 

Answer 3

당신은 무슨 ILE 사용할 수 있습니다,하지만 div를 추가하는 대신 y addClass를 사용할 수 있습니다. 호만한 객체로 li을 사용하십시오.

$("li.picture").hover(
    function(){ 
     $(".selected_result").removeClass("selected_result"); 
     $(this).addClass("selected_result"); 
    } 
); 

저는 프로 자바 스크립트 사용자가 아닙니다. 그러나 이것은 당신에게 아이디어를 줄 것입니다.