懸停在動態列表上，顯示適當的文本在單獨的div

因此，我會給你的代碼是可怕的...我試圖找出它，但javascript似乎是不能讓我感到厭煩。懸停在動態列表上，顯示適當的文本在單獨的div

我有一個動態生成的無序列表。當用戶懸停在每個列表項目上時，我想在單獨的div中顯示更多信息。

繼承人我有什麼HTML/PHP的明智：

<div id="inv"> 
<ul> 
<?php 
$i = 1; 
foreach ($inv as $item) { 
    echo "<li class='inventory' id='$i'>"; 
    echo $item['name'] . "<input type=button value='destroy'></input> "; 
    echo "</li>"; 
    $i ++; 
} 
?> 
</ul> 
</div> 
<?php 
$i = 1; 
foreach ($inv as $item) { 
echo "<div class='inventory_display' id='$i'>".$item['name']."</div>"; 
$i ++; 
}

CSS：

#inventory ul { 
    list-style: none; 
} 
#inventory li { 
    background-color: #B3B4BD; 
    color: white; 
} 

#inventory li:hover { 
    background-color: #9bc2d0; 
    color: black; 
    cursor: pointer; 
} 

#inventory { 
    float:left; 
    width: 500px; 
} 

#inventory_display { 
    display: none; 
    margin-left: 420px; 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    background-color: #97cae6; 
}

我想我需要的JavaScript，但真的不知道從哪裏開始。粘貼我的東西可能只會導致更多的混淆。

我很高興看到一個簡單的懸停顯示，但可能會試圖讓懸停顯示它，並點擊使其靜態。

謝謝。請讓我知道是否需要更多信息！如果對於一個完整的答案來說太麻煩了，任何開始的地方，比如鏈接等都會有幫助。

謝謝！

來源

2012-06-28 Ricky Mason

首先你'li'和'div'將包含相同的'id's'這是壞 – Dhiraj

OK編輯它：DIV ID = 'INV'，而不是 –

我的意思是裏面的股利第二個foreach循環，而不是在這裏包含php代碼，您應該可以在[jsfiddle.net]（http://jsfiddle.net）上給出一個示例，以便大家輕鬆理解 – Dhiraj

移動$item['name']進入li的rel屬性。

echo "<li class='inventory' id='$i' rel="$item['name']">";

現在，我們可以使用jQuery爲它添加一個元素，並顯示該div內的rel。

CSS需要改變，以及

#inventory li{ 
    background-color: #B3B4BD; 
    color: white; 
    /* Add this */ 
    position:relative; 
}

新類。

.li-tooltip{ 
    position:absolute; 
    top:0; 
    /* other css stuff, we'll do the width and height later. */ 
}

讓我們現在使用jQuery來做一些漂亮的東西。

$('#inventory li').hover(function(){ 
    //this is the "mouse in" 
    // find the width of the LI, so we can use that to decide positioning. 
    var liW = $(this).width(); 
    $('<div class="li-tooltip">'+$(this).attr('rel')+'</div>').css('left', liW).appendTo($(this)); 
}, function(){ 
    //this is the "mouseout" 
    $('.li-tooltip').remove(); 
});

Here is the working jsFiddle

來源

2012-06-28 14:44:52 Ohgodwhy

謝謝。有一點玩這個代碼，我敢肯定，我可以得到它的工作！ –

懸停在動態列表上，顯示適當的文本在單獨的div

回答

相關問題