![](/img/trans.png)
[英]how to split a long text from database to show it as different paragraphs in php?
[英]Mouse hovering popup on multiple text paragraphs, using data from database
我试图以某种方式使用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属性是不够的。 我需要能够更改弹出框上的颜色,使其看起来像页面的其余部分。
您只能将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的鼠标单击。
您还需要将图像放置在要显示/隐藏的区域内。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.