我想隱藏或顯示div上的鼠標在按鈕上

有2個div在該div上的數據我從「詳細信息」按鈕上的數據庫獲取記錄我想顯示那些div javascript不工作，當我應用java腳本它只顯示第一個ID我提出，我所使用的代碼，請大家給我soluation 我想隱藏或顯示div上的鼠標在按鈕上

<?php 

    $sml_add="SELECT * FROM small_add WHERE sub_dest='$sub_desti_id' AND active_hotel='YES' "; 
    $sml_add1=mysql_query($sml_add); 
    while($sml_add_res=mysql_fetch_assoc($sml_add1)) 
    { 

      ?> 


      <div class="col-md-2 col-sm-4"> 
      <div class="small-add" style="height:263px;" > 
      <div class="result-box-heading"> 
     <?php echo $sml_add_res["hotel_keyword"]; ?> 
     </div> <div class="clearfix"></div> 
      <center><img src="./../smalladd_picture/<?php echo $sml_add_res["image"]; ?>" class="img-responsive" style="width:130px;height:84px;padding:5px;"></center> 
      <div class="small-add-inner"> 
      <h2 style="padding:-25px;"><?php echo $sml_add_res["hotel_name"]; ?></h2> 
      <p><?php echo $sml_add_res["location"]; ?></p> 
      <p style="color:#c90017;"><?php echo $sml_add_res["cost"]; ?></p> 
      <div class="small-add-but" style="width:95px;position:relative;top:16px;right:20px;"><a id="detail" style="border:1px solid #88D9FF;" >Details</a></div> 
      <div class="small-add-but"style="position:relative;right:-35px;top:-14px;" ><a style="border:1px solid #88D9FF;"href="hotel-details.php">Contact</a></div> 
     </div> 

      </div> 

     <style> 
      hr { 

      border-top:1px dotted #88D9FF; 
      color:#fff; 
      background-color:#fff; 
      height:-10px; 
      width:100%; 
      position:relative; 
      top:-25px; 
     } 
     </style> 

     <style> 
     #div1{ 

     border:1px solid white; 
     height:260px; 
     width:500px; 
     position:absolute; 
     top:10px; 
     right:190px; 
     background:#1A8CFF; 
     border-radius:5px; 
     text-color:white; 
     } 
     </style> 
     <div id="div1" > 
     <img src="./../smalladd_picture/<?php echo $sml_add_res["image"]; ?>" height="80px" width="90px" style="margin:20px;"> 
     <div style="position:absolute; top:15px; left:122px;"> 
     <p style="color:white;"><?php echo $sml_add_res["hotel_keyword"]; ?></p> 
     <p style="color:white;"><?php echo $sml_add_res["hotel_name"]; ?></p> 
     <p style="color:white;"><?php echo $sml_add_res["location"]; ?></p> 
     <p style="color:white;"><?php echo $sml_add_res["cost"]; ?></p> 
     </div> 
     <hr> 
     <div style="position:relative;left:20px;top:-25px;"> 
     <p style="color:white;">CUISINES: Biryani, North Indian, Mughlai, Chinese, Seafood</p> 
     <p style="color:white;">COST FOR TWO: Rs. 800</p> 
     <p style="color:white;">HOURS: 9 AM to 12 Midnight</p> 
     <p style="color:white;">FEATURED IN:Trending this Week</p> 
     </div> 
     </div> 
     </div> 


     <?php 

    } ?>

來源

2016-03-05 Vivek

它應該能夠使用CSS來顯示

此加入了#details你的CSS文件：

#details:hover #div1{ 
display:block 
}

這對你的CSS添加DIV1內：

#div1{ 
display:none 
}

應該顯示＃DIV1當鼠標移動到#details。

順便說一句，請下一次提高你的英語水平。真的很難理解你在說什麼。

編輯改進：

對不起，上面的代碼工作，DIV1應該是細節的孩子，我的錯。

無論如何，你可以實現與javascript中的溶液：

onmouseout="document.getElementById('div1').style.display = 'none'" 
onmouseover="document.getElementById('div1').style.display = 'display'"

你的標籤ID爲詳情：

<a id='details' onmouseout="document.getElementById('div1').style.display = 'none'" onmouseover="document.getElementById('div1').style.display = 'display'" .... >....</a>

來源

2016-03-05 06:01:29 spaniard

不工作先生。 – Vivek

我編輯瞭解決方案我解釋了爲什麼老年人沒有工作。您應該使用javascript或更改您的html樹，以將div1作爲詳細信息的子項。我向你推薦第一個選項。 – spaniard

sir其顯示div，但在兩個細節按鈕上它顯示有關第1條記錄的詳細信息。在第二個div中，我從數據庫中獲取的詳細信息是不同的。 – Vivek

如果要觸發CSS，你必須使用一個事件僞類在這種情況下：懸停。因此將元素的可見性設置爲隱藏狀態，然後將其設置爲懸停時可見。

來源

2016-03-05 21:14:22

一個簡單的方法來通過CSS隱藏按鈕上鼠標的div塊是使用：懸停事件與僞類。

的示例爲相同的是如下所述：

<!DOCTYPE html> 
<html> 
<head> 
<title>Hide div on mouse hover of button</title> 
<style> 
div { 
    background-color: black; 
    color: white; 
} 
button:hover ~ div { 
    display: none; 
} 
</style> 
</head> 
<body> 
    <button>button</button> 
    <div>This is div block</div> 
</body> 
</html>

來源

2017-09-27 04:38:14 Param

回答

相關問題