Question

有2个div的数据在div上我从数据库中获取记录“详细信息”按钮上面我希望显示那些div javascript无法正常工作当我应用java脚本时它只显示第一个id我提交的代码我用于此请给我解决方案

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

    }  ?>

Answer 1

它应该可以使用CSS来显示

将此添加到您的css文件中以获取#details：

#details:hover #div1{
display:block
}

将它添加到div1中的css：

#div1{
display:none
}

当鼠标悬停在#details上时，它应该显示＃div1。

顺便说一下，请你下次提高你的英语水平。很难理解你在说什么。

编辑改进：

抱歉，对于上面的代码工作，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>

Answer 2

如果要在CSS中触发事件，则必须使用伪类：hover。所以将元素的可见性设置为隐藏，然后在悬停时将其设置为可见。

Answer 3

通过CSS隐藏按钮鼠标上的div块的一种简单方法是使用：带有伪类的hover事件。

相同的例子如下所述：

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

我想在鼠标悬停按钮时隐藏或显示div

3 个答案: