我有一个很棒的字体 div,它漂浮在我的图像顶部,以提供从 mysql 数据库中提取的图像详细信息。
当我将鼠标悬停在这个(信息) Font Awesome 图标上时,一个微小的内联打开了来自 mysql 的内容。
现在,当内容为 NULL 时,我根本不想显示超棒的字体。
以下是我的代码。
<div id="hotspot1" class="hotspot" style = "position: fixed;">
<i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>
<div class="hover-popup well">
<?php
if ($details == null) {
echo "class='display-none';";
}
else {
echo $details;
}
?>
</div>
</div>
这个悬停弹出窗口的 CSS 是
#hotspot1 {
right:93%;
top:3%;
}
.hotspot {
line-height:20px;
text-align:center;
position:absolute;
cursor: pointer;
}
.hotspot .text {
width:80px;
height:20px;
}
.hover-popup {
display:none;
z-index:auto;
}
.hotspot:hover .hover-popup {
display:inline;
position:absolute;
left:100%;
top:0;
width:300px;
height: auto;
border:2px solid #000;
margin: 20px;
padding: 20px;
font-size: 16px;
background: #FBF0D9;
font-style: oblique;
.display-none {
display:none;
}
现在当有空值时,它会直接显示“class = 'display-none'”
我该怎么做才能使图标在空值期间完全消失?
我应该使用 JS 还是 JQuery?
最佳答案
class 属性需要在它所应用的元素内部,您当前在任何元素外部回显
,这就是您在页面上看到它的原因。
我无法确切地了解您要实现的目标,但似乎您想在 $details
不是 null
时显示一些特定的 HTML .
这至少应该给你一些线索,
<div id="hotspot1" class="hotspot" style="position: fixed;">
<?php if ($details != null): ?>
<i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>
<div class="hover-popup well">
<?= $details; ?>
</div>
<?php endif; ?>
</div>
在上面的代码中,如果$details
不是null
,那么PHP block 之间的HTML 将被输出,否则不会。您可能希望将所有 HTML 放在 PHP block 之间。
关于javascript - 当显示的内容在数据库中具有 NULL 值时隐藏 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39901401/