0

だから、私があなたに与えるコードはひどいです...私はそれを理解しようとしましたが、javascriptは私には学習できないようです.

動的に生成された順序なしリストがあります。ユーザーが各リスト項目にカーソルを合わせると、別の 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が必要だと思いますが、どこから始めればよいのか本当にわかりません。私が持っているものを貼り付けても、おそらく混乱を招くだけです。

単純なホバー表示が表示されれば満足ですが、おそらくホバー表示を作成し、クリックすると静的になります。

ありがとう。さらに情報が必要な場合はお知らせください。完全な回答が難しい場合は、リンクなど、開始する場所も役立ちます。

ありがとう！

4

1 に答える 1

2

の属性に移動$item['name']します。relli

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();
});

これが動作中のjsFiddleです

于 2012-06-28T14:44:52.763 に答える