懸停時如何顯示錶格

-3

我有一張圖片拼貼。我希望能夠將鼠標懸停在他們身上，然後點擊「製作個人資料照片」，然後將其製作成個人資料照片。懸停時如何顯示錶格

與Facebook類似，如果您將鼠標懸停在圖片上，可以選擇編輯/喜歡/評論。

謝謝。

我有以下，但它不工作。

<%= link_to image..., :id => "pic" %> 
<%= link_to "Profile Pic".... , :remote => true, :id => "pf" %>

jQuery的

$('#pic').hover(function() { 
    $('#pf').show() 
})

來源

2012-12-27 noob

'它不工作'是什麼意思？ –

@ExplosionPills：也許它很懶惰？也許它需要適當的動機。 –

也許'link_to'（第一行;下劃線）和'link to'（第二行;空格）之間的不一致是這裏的原因？ –

你可以嘗試這樣的事：

http://jsfiddle.net/jrb9249/UsnfT/3/

內嵌代碼看起來是這樣的：

HTML：

<body> 
<div id="div_parent"> 
    <img id="myImg" src="http://s13.postimage.org/x23kf7ycz/DSC02036.jpg" 
    onMouseOver="javascript:myMouseOver()"/> 
    <div id="div_child" 
    onMouseOut="javascript:myMouseOut()"> 
     <a target="_blank" id="myLink">Make profile Picture</a> 
     <br><br> 
     <a target="_blank" id="closeLink" onclick="javascript:mytest()">Close</a>   
    </div> 
</div> 
</body>

的Javascript：

function myMouseOver(){ 
    $('#div_child').fadeIn('fast'); 
}; 

function mytest(){ 
    $('#div_child').fadeOut('fast'); 
};

CSS：

div 
{ 
    border:none; 
    margin:0; 
    padding:0; 
} 

#div_child a:hover 
{ 
    cursor:pointer; 
} 

#div_parent 
{ 
    position:relative; 
} 

#div_child 
{ 
    position:absolute; 
    left:155px; 
    top:0px; 
    display:none; 
    border:solid 1px gray; 
    padding:5px; 
} 

#div_parent img 
{ 
    width:150; 
    height:112; 
} 

#closeLink 
{ 
    color:blue; 
    font-size:6; 
    float:right; 
} 

#closeLink:hover 
{ 
    text-decoration:underline; 
}

它使用了相對定位的父和絕對定位的孩子，以抵消選項框。然後通過jquery使用簡單的鼠標懸停和onclick函數，用戶可以輕鬆查看和關閉該框。

我最初嘗試使用onMouseOut函數來關閉彈出窗口，但我不太清楚如何使其正常工作。關閉鏈接解決了這個問題。

來源

2012-12-27 21:59:15 Lopsided

懸停時如何顯示錶格

回答

相關問題