Question

可能重复：
How to show/hide a div on mouseover using jquery?

我在表格中有一个foreach循环，以动态显示来自DB的内容。

<table cellpadding="3" cellspacing="0" align="center">

<?php 
foreach($test as $testcontent){
                echo  '<tr>';
    echo '<td class="trigger">'.$testcontent[0].'</td>';
    echo '<td class="trigger">'.$testcontent[1].'</td>';
    echo '<td class="trigger">'.$testcontent[2].'</td>';
    echo '<div class = "popup">
              <div class="Month">
                    <div class="MonthDiv">
                        <span class="MonthText">'.$testcontent[0].'</span>
                    </div>
              </div>
              <div class='Day'>
                    <div class="DayDiv">
                        <span class="DayText">'.$testcontent[1].'</span>
                    </div>
              </div>
              <div class='Time'>
                    <div class="TimeDiv">
                        <span class="TimeText">'.$testcontent[2].'</span>
                    </div>
              </div>
         </div>';
    echo '</tr>';
 }
?>
</table>

显示/隐藏弹出窗口的功能如下...

$(function() {
   var moveLeft = 20;
   var moveDown = 10;

   $('.trigger').hover(function(e) {
       $('.popup').show();            
    }, function() {
       $('.popup').hide();
    });

    $('.trigger').mousemove(function(e) {
    $(".popup").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
   });

参考：I used this link to display popup

弹出窗口显示但问题是当我将鼠标移动到第2行，第3行....时，只有第一行的内容显示在弹出窗口中。我不知道为什么。任何人都可以帮助我吗？

我甚至试过

$('.trigger').hover(function(e) {
   $('.MonthText').html($(this).html());
   $('.popup').show();
}

弹出窗口的CSS是......

div.popup {
    display: none;
    position: absolute;
    width: 640px;
    padding: 10px;
    background:#FFFFFF;
    color: #000000;
    border: 1px solid #1a1a1a;
    font-size: 90%;
    height:400px;
}

现在div随着鼠标指向的值而变化我需要得到整个行值才能改变....（我的意思是我需要重新加载整个div）
我一直在研究这个问题请帮帮我...... 所做的更改：我用类替换了弹出窗口ID，但仍然得到相同的结果。

Answer 1

你所有的弹出div都有同样的理想情况，jQuery会选择第一个。尝试在.trigger元素和弹出div上添加一个属性，指示它应该弹出哪个div（可以使用循环索引）。然后在悬停事件中，您可以使用该属性值显示正确的弹出窗口。

我正在打电话，所以没有示例代码。如果您了解其他我可以提供样本

，请告诉我

编辑：以下不同的示例

$(document).ready(function(){
    $('.trigger').click(function(){
        $(this).parent().children('.popup').show();
    });
});

如果有效，请告诉我。来自@ abhijeet-pawar的上述答案也应该理想地起作用

Answer 2

第一件事是id不应该在html页面重复。因此，将'popup'更改为class而不是id。

<div class="popup" style="display:none">
...

按如下方式更改jQuery：

$(function() {
   var moveLeft = 20;
   var moveDown = 10;

   $("table").on("mouseenter ", ".trigger", function() {
      $(this).siblings('.popup').show();
   });
   $("table").on("mouseleave ", ".trigger", function() {
      $(this).siblings('.popup').hide();
   });
   $("table").on("mousemove", ".trigger", function() {
      $(this).siblings('.popup').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
   });

});

如何在鼠标上动态更改div内容？

2 个答案: