表示されたコンテンツがデータベースにNULL値を持っているときにDIVを非表示にする

Question

mysqlデータベースから抽出された画像の詳細を与えるために、私の画像の上に浮かぶフォントawesome divがあります。

この（情報）フォントのすばらしいアイコンにカーソルを合わせると、小さなインラインがmysqlのコンテンツで開きます。

コンテンツがNULLの場合、フォントがすばらしく表示されないようにします。

以下は私のコードです。 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; 
     } 

ですヌル値の間にアイコンを完全に消滅させるには？

JSまたはJQueryを使用する必要がありますか？

Answer 1

クラス属性は、「あなたが現在なぜある任意の要素のecho INGの外に、ある、それが適用される要素内にする必要がありますそれをページで見ています。

達成しようとしている内容を正確には理解できませんが、が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が出力されますPHPブロック間のHTMLは、その後nullでない場合は、そうでない場合ではありません。すべての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;?> >