当显示的内容在数据库中具有 NULL 值时隐藏 DIV

Question

我有一个字体很棒的 div，它漂浮在我的图像顶部，以提供从 mysql 数据库中提取的图像详细信息。

当我将鼠标悬停在这个（信息）字体真棒图标上时，会打开一个带有 mysql 内容的小内联。

现在当内容为 NULL 时，我根本不希望字体 awesome 出现。

以下是我的代码。

<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？

Answer 1

class 属性需要在它所应用的元素内，您目前在任何元素之外echoing，这就是您在页面上看到它的原因。

我无法确切知道您要实现的目标是什么，但是当$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块之间的HTML，否则不会。您可能希望将所有 HTML 放在 PHP 块之间。

Answer 2

您将样式和类与上述表示法混淆了，也许这样会更好？

<div id="hotspot1" class="hotspot" style = "position: fixed;">
    <i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>

        <?php
            $style=is_null( $details ) ? "style='display:none'" : "";
        ?>
        <div class="hover-popup well" <?php echo $style;?> >

        </div>
</div>

或者，不要像最初尝试那样添加内联样式分配一个类，而是在某处的 css 中定义该类。然后，您可以使用类似的符号，但改为引用该类 - 例如：

<style>.dispnone{ display:none; }</style>

<?php
    $class=is_null( $details ) ? "class='dispnone'" : "";
?>

<div class="hover-popup well" <?php echo $class;?> >