如何隱藏鼠標在另一個div上的div？

我有HTML是這樣的：如何隱藏鼠標在另一個div上的div？

<table> 

    <tr> 
    <td><div class='record'>Record Link</div></td> 
    <td><div class='delete' style='display:none;'>Delete Link</div></td> 
    </tr> 

    <tr> 
    <td><div class='record'>Record Link</div></td> 
    <td><div class='delete' style='display:none;'>Delete Link</div></td> 
    </tr> 

</table>

Delete Link隱藏在上面HTML。我想說明Delete Link當鼠標懸停在其相關record DIV

努力的prototypejs一些基本的教程後，我能寫出下面這是爲我工作，但尚未完成的代碼。

document.on('mouseover', 'div.record', function(event, element) { 
    event.target.hide(); // testing: it hides the record itself 
});

以下代碼不是爲我工作：

$('delete').setStyle({ display: 'block' }); 
$$('div.delete').setStyle({ display: 'block' });

來源

2012-03-09 Awan

在原型，通過設置$("delete")您呼叫ID爲delete，我沒有看到任何地方元素。您需要設置<div id='delete' style='display:none;'>Delete Link</div>

，並使用以下綁定事件，並悄悄地開始你的腳本，

編輯因爲有很多div.delete使用$$（）選擇如下

 document.observe("dom:loaded", function(){ 
    var deleteLinks=$$(".delete"); 
    for(var i=0;i<deleteLinks.length;i++){ 

     deleteLinks[i].observe("mouseover",functio(){ 
      this.setStyle({ display: 'block' }); 


     }); //bind event 

     } 
    });

如果你想隱藏mouseover設置display:none，而不是display:block 您還可以使用visibility:hidden但仍然會佔據你的HTML作爲空間一個面積部分

來源

2012-03-09 07:49:09 jmishra

我不能設置ID，因爲在同一頁上有很多'delete' div。我想我必須使用班'刪除'div – Awan 2012-03-09 07:53:28

@Awan編輯我的回答 – jmishra 2012-03-09 08:04:51

嘗試CSS：

table#mytable tr:hover .delete{ /*identify your table for this effect, so as not to affect other tables*/   
    display:block !important; /* !important is needed for override since */ 
}        /* you styled "display:none" on element level */

這樣做是檢測徘徊在從父級子（CSS不起泡），然後將樣式元素進行。

來源

2012-03-09 07:54:56 Joseph

嗯。完美的工作..謝謝 – Awan 2012-03-09 08:50:37

如何隱藏鼠標在另一個div上的div？

回答

相關問題