點擊圖片懸停時顯示的文字

我想顯示一個文本時，圖像是徘徊（與.animate）。
當文本顯示然後盤旋時，用戶可以點擊它。
如果文本和圖像都沒有懸停，文本淡出。
用戶無法將鼠標懸停在圖像上方，而無需先懸停圖像。

有人可以幫助我做到這一點嗎？

這裏是我做過什麼：

HTML：

<div id="container"> 
    <img src="blabla.jpg" /> 
    <p id="p1"> click here ! </p> 
</div>

的jQuery：

$(document).ready(function(){ 
             // on img hover 
    $("img").hover(function() { 
     $(this).next().animate({   // Change p1 style 
      'opacity': '1', 
      top: "+=10px"}, 
     200); 
             // Non hovered 
    }, function() { 
     $(this).next().animate({   // Restore p1 style 
      'opacity': '0', 
      top: "-=10px"}, 
     200); 
    }); 


    $('#p1').hover(function() { // On p1 hover 
     $(this).next().css({   // change p1 style 
      'opacity': '1', 
      top: "-51px"}); 
    }, function() {    // Non hovered 
     $(this).next().css({ 
      'opacity': '0',   // restore p1 style 
      top: "-41px"}); 
    }); 

});

簡單的CSS：

#container{ 
    position:relative; 
    top: 20px; 
    left:20px; 
    width:110px; 
    height:110px; 
} 

#p1{ 
    position:relative; 
    color:white; 
    width:110px; 
    text-align:center; 
    margin-left:-55px; 
    left:50%; 
    background-color: navy; 
    height:20px; 
    opacity:0; 
    top: -129px; 
}

來源

2014-02-21 David

jsfiddle鏈接更新..舊版本是舊版本 – David

我會將懸停邏輯移動到您的容器元素，只是使其尺寸與圖像相同。這樣，當你將鼠標放在它上面時，文本不會消失。 – stakolee

如何通過[僅限CSS]（http://jsfiddle.net/4ypSK/2/）實現該功能？ –

我和CSS這樣做只。更容易使用（請注意，我使用codepen的前綴免費插件）。

更新：添加了的jsfiddle鏈接太

HTML

<div class="box"> 
    <a href="http://google.co.uk">Click Me!</a> 
</div>

CSS

.box{ 
    background:red; 
    width:100px; 
    height:100px; 
    position:relative; 
} 

.box:hover a{ 
    top:10px; 
    opacity:1; 
} 

a{ 
    -webkit-transition:all .4s; 
    -moz-transition:all .4s; 
    -o-transition:all .4s; 
    -ms-transition:all .4s; 
    transition:all .4s; 
    background:blue; 
    color:#fff; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    text-align:center; 
    opacity:0; 
}

CodePenJSFiddle

看一看Mr. Alien的意見，更先進的版本這個的。

來源

2014-02-21 16:41:51 Albzi

點擊圖片懸停時顯示的文字

回答

相關問題