jQuery/CSS浮動/覆蓋工具欄/按鈕

我不確定是否使用了正確的術語來描述我正在尋找的內容，但這是我能想到的最好的。jQuery/CSS浮動/覆蓋工具欄/按鈕

基本上，我有一個目前在DIV中顯示的項目列表。我正在使用jQuery UI插件，並在用戶將鼠標懸停在每個項目上時連接樣式進行切換。現在，當鼠標懸停在該項目上時，我想在每個項目的右上角出現一個小型的工具欄狀按鈕。當鼠標向上或向下移動到下一個項目時，工具欄「移動」到該項目。當然，它並沒有真正移動 - 我假設我正在切換與每個項目關聯的工具欄的可見性。

後一點是由於一些因素造成的，包括按鈕使用每個列表項的id值進行編碼，因此該命令知道哪個項目要處理。

我需要知道的是如何創建HTML和CSS，以便可以使DIV的內容不受工具欄顯示的影響。標記和樣式設置使工具欄出現在每個項目的右上角，位於現有內容的上方。

UPDATE

我基本上有一個<DIV>包裝，包含另一個<DIV>使用文本和另一<DIV>包含一組圖像按鈕（包裹在錨圖像）。我需要的是HTML和CSS，因此包含按鈕的<DIV>（或其他任何需要使其工作的元素）包含這些按鈕，似乎浮動在父代<DIV>的右上角，如下圖所示：

enter image description here

然後我就可以使用jQuery來顯示和隱藏的按鈕時，該項目是徘徊。

來源

2011-05-09 SonOfPirate

你能至少會發布一些HTML和JS，讓我們知道你在拍攝什麼？哈哈「掛鉤樣式」...抱歉沒有幫助：] – pixelbobby 2011-05-09 18:51:28

如果你只需要HTML/CSS，你可以做這樣的事情：

CSS 
/* this contain both your injected JS and your current content */ 
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;} 
.highlight * {margin:0; padding:0;} 
/* you will place your action buttons here, they seem to be: delete, promote, demote */ 
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; } 
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;} 
/* add the styles per each button, they will all look the same for now */ 
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;} 

HTML 
<div class="highlight"> 
    <ul class="nav"> 
    <li><a>DELETE</a></li> 
    <li><a>PROMOTE</a></li> 
    <li><a>DEMOTE</a></li> 
    </ul> 
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p> 
</div>

編輯：用我張貼在http://jsfiddle.net/edCD3/

好運代碼，利奧更新

來源

2011-05-11 08:12:38 leopic

這甚至沒有接近工作。除了在左上方顯示「工具欄」（這是一件小事）之外，沒有疊加層，因此它在頂部顯示單詞「DELETE」，一個不錯的大小中斷，然後是段落文本。不是我在找什麼。如果您覺得我錯了，請使用適用於您的完整HTML和CSS更新您的文章，我會再試一次。 – SonOfPirate 2011-05-11 17:38:15

對不起，似乎我正在犯一些錯別字，沒有得到一些類，這裏又一次：http://jsfiddle.net/edCD3/ – leopic 2011-05-12 06:46:04

太搞笑了。 JSFIDDLE網站幾乎正是我想要的。當您將鼠標懸停在HTML框上時，您會在其他框中看到CSS，JavaScript和Result氣球。將鼠標移到CSS框上，該框消失，並出現HTML氣球。這是我正在尋找，除了相反 - 當我懸停在CSS上，該氣球應該出現，所有其他人隱藏。我可以使用jQuery處理該部分。我不得不使用你的代碼（p來跨越，增加寬度：100％來突出顯示），但它看起來像它的工作。我會看看我是否可以在我的網站下工作。 – SonOfPirate 2011-05-12 13:12:05

jQuery/CSS浮動/覆蓋工具欄/按鈕

回答

相關問題