在圖像懸停，在中心

我在尋找一種方法，這樣，當我懸停在圖像，標題或ALT標記被顯示在圖像的中央顯示標題/ ALT標記（進/出衰落），圖像也不透明。在圖像懸停，在中心

我環顧四周相當多，但大多數的JavaScript插件，我發現創建一個工具提示，它是不是我要找的。

感謝您的任何建議。

編輯：忘了提，圖像需要停留在簡單的UL列表，沒有多餘的div或任何包裝的每個圖像周圍。他們也將使用相關的shadowbox或類似的東西。

2011-12-28 malicedix

你可以做這樣的事情

$('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

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也可以改善...但這給你一個想法）

實施例：http://jsfiddle.net/dgKne/

來源

2011-12-28 23:21:49

謝謝，這項工作非常出色。我只需要弄清楚如何讓CSS把標題放在每個圖像的中心。使用提供的CSS，它位於頁面的中心。我已經把它放在每張圖片的左下角。如果它使.title相對，我可以將它放置在圖像的中心，但它會讓所有其他圖像在徘徊時移出位置（它是一個方形圖像的網格）。 – malicedix 2011-12-29 00:46:02

這僅僅是如何可以解決在使用jQuery這個問題的方法一般描述：）

1放入一個div的圖像，並給這個div類（例如：altHover）
2）懸停，先挑選ALT標籤，並將其存儲在變量：var title = $("em").attr("title");
3）在同一懸停功能，使新的div裏面徘徊在它裏面的div和打印ALT標籤：

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

來源

2011-12-28 21:45:05

謝謝，有一個方法通過具有隻在一個簡單的UL列表中的圖像，以執行此操作。原因是，客戶端應該使用CMS將圖像添加到頁面，並且它的設置方式不會以這種方式添加div。應該在第一篇文章中提到，抱歉。 – malicedix 2011-12-28 22:57:45

這是可能的。只需更改.append中的部分即可選擇所需內容。如果你不能在這裏發佈html代碼來處理它 – 2011-12-28 23:01:12

你可以使用有什麼ILE，但而不是添加div，y你可以使用addClass。只需使用li作爲可移動對象。

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

我不是親JavaScript的人，但這會給你一個想法。

來源

2011-12-28 23:09:46 KayleL

在圖像懸停，在中心

回答

相關問題