使用數據庫中的數據將鼠標懸停在多個文本段落上

Question

我試圖以某種方式使用HTML和PHP在幾個段落上彈出一個窗口。 該頁面使用while循環從數據庫加載數據，並且每個段落在數據庫表中都包含一行。 以下是我代碼的相關部分。

在文件的開頭，我有一個php部分，其中包含以下相關行：

<?php
    $kommun = $_SESSION['kommun'];
    $salary = $_SESSION['loen'];

    $sql2 = "SELECT * FROM sk_municip WHERE id = :id";
    $stmt2 = $dbh->prepare($sql2);
    $stmt2->execute(array(':id' => $kommun));

    $totalSkatt = (($salary * $result2['tax']) / 100);

    $sql3 = "SELECT id, name FROM sk_areas";
    $stmt3 = $dbh->prepare($sql3);
    $stmt3->execute();

    $sql4 = "SELECT area, part, percent, desc FROM sk-mun-".$kommun." WHERE area = :area ORDER BY percent DESC";
    $stmt4_1 = $dbh->prepare($sql4);
    $stmt4_2 = $dbh->prepare($sql4);
?>

在文檔的更下方，我使用上面的php編寫了div和段落：

<?php while ($result3 = $stmt3->fetch()): ?>    

    <?php 
        $stmt4_1->execute(array(':area' => $result3['id']));
        $stmt4_2->execute(array(':area' => $result3['id']));
    ?>

    <?php if ($stmt4_1->fetchColumn() > 0): ?>
        <div class="taxarea">

            <div class="taximg">...</div>

            <div class="taxtext">
                <p class="inhead">...</p>
                <p class="inline">...</p>

                <?php while($result4 = $stmt4_2->fetch()): ?>
                    <?php $partSkatt = round((($totalSkatt * $result4['percent']) / 100)); ?>

                    <p class="tdone">
                        <?php echo $result4['part']; ?>
                    </p>

                    <p class="tdtwo">
                        <?php echo $partSkatt ?> kr
                    </p>

                    <p class="inline">...</p>
                <?php endwhile; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endwhile; ?>

我想做的是，當有人將鼠標懸停在“ tdone”或“ tdtwo”類上時，將出現一個彈出窗口，其中包含該行的desc列中的信息。 如果元組為空或NULL，則不應彈出。

這是一個復雜的問題，我希望我能夠很好地描述它。 我知道一些制作彈出窗口的方法，但並不動態，就像我現在需要的那樣。 對我來說，使用javascript，jquery或css都沒關系，我只需要一個好方法。

僅添加title屬性是不夠的。 我需要能夠更改彈出框上的顏色，使其看起來像頁面的其余部分。

Answer 1

您只能將CSS用於鼠標懸停： http : //jsfiddle.net/DbuDL/

.tdone, .tdtwo {
    width: 400px;
    height: 100px;
    overflow: hidden;
    border:1px solid black;
    background-color: white;
}
.tdone:hover, .tdtwo:hover {
    overflow:visible;
    height: auto;
}

但是從可用性的角度來看，最好使用onclick事件來折疊/擴展該區域。

編輯：我已經udpated jsFiddle： http : //jsfiddle.net/DbuDL/1/使用JavaScript的鼠標單擊。

您還需要將圖像放置在要顯示/隱藏的區域內。