如何隐藏鼠标悬停时出现的弹出窗口后面的数据？答案

【问题标题】：How to hide the data behind the popup which appears on mouse hover?如何隐藏鼠标悬停时出现的弹出窗口后面的数据？
【发布时间】：2016-02-24 08:11:20
【问题描述】：

这是我的 CSS。

#driver_list{
    overflow:hidden;
    }
div#driver_price_pop_up{
      position: absolute;
      width: 20%;
      min-height:200px;
      background:white;
      color: red;
      border: 1px solid #1a1a1a;
}
.head_popup_price{

    width:100%;
    min-height:50px;
    background:black;
    color:white;
    border:1px solid black;
    font-size:16px;
}

.popup_body_price{
    width:100%;
    min-height:150px;
    color:black;
    background:#e6ffff;
    border:1px solid black;
    font-size:18px;
}

driver_list 标签类似于容器标签，#driver_price_pop_up id 包含一个弹出窗口，当用户将鼠标悬停在特定的东西上时会出现，而在鼠标移动时会消失。head_popup_price 是分配给头部的类popup ,popup_body_price 是分配给popup body的一个类。问题是popup来的时候，后面的数据也是可见的。数据不应该是可见的。我尝试将overflow:hidden 提供给 driver_list 但它不起作用。伙计们请帮助我。我的html代码。

<div id="driver_price_pop_up" >

                <div class="head_popup_price">Head</div>
                <div class="popup_body_price">Pop-up div Successfully Displayed</div>
         </div>

【问题讨论】：

请创建一个小提琴。
请放html代码
@haithamsha 包含了 html 代码。
尝试在弹出窗口中添加 z-index。
我给了那个...没有帮助..@Legin76

标签： html css popup

【解决方案1】：

试试这个。其实你已经接近你的结果了

<div class="driver_price_pop_up">
<div class="head_popup_price">Head</div>
<div class="popup_body_price">Pop-up div Successfully Displayed</div>
</div>
<style>
.head_popup_price{ 
display: none;
}
.driver_price_pop_up:hover .head_popup_price{
display : block;
}
.driver_price_pop_up:hover .popup_body_price{
display : none;
}
.popup_body_price{
width:100%;
min-height:150px;
color:black;
background:#e6ffff;
border:1px solid black;
font-size:18px;
}
.head_popup_price{
width:100%;
min-height:50px;
background:black;
color:white;
border:1px solid black;
font-size:16px;
}
.driver_price_pop_up{
  position: absolute;
  width: 20%;
  min-height:200px;
  background:white;
  color: red;
  border: 1px solid #1a1a1a;
  }
</style>

这是悬停显示一个 div 内容的示例。试试看

【讨论】：

【解决方案2】：

为我尝试这项工作，但我确实通过 jquery 悬停（javascript 库让生活变得轻松）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/main2.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("div").hover(
        function () {
            // display pop up div
         $('#driver_price_pop_up').show();
         },
        function () {
            // hide pop up div
          $('#driver_price_pop_up').hide();
         }
         );
    });
</script>
</head>
<body>
<div id="driver_price_pop_up">
    <div class="head_popup_price">Head</div>
    <div class="popup_body_price">Pop-up div Successfully Displayed</div>
</div>
<div class="mydiv">
    content shoud be pop up appear on it
</div>
</body>

css

#driver_list{
overflow:hidden;
}
div#driver_price_pop_up{
  position: absolute;
  width: 20%;
  min-height:200px;
  background:white;
  color: red;
  border: 1px solid #1a1a1a;
  display:none;
  margin:30px;
}
.head_popup_price{

width:100%;
min-height:50px;
background:black;
color:white;
border:1px solid black;
font-size:16px;
}

.popup_body_price{
width:100%;
min-height:150px;
color:black;
background:#e6ffff;
border:1px solid black;
font-size:18px;
}

【讨论】：

javascript 工作正常。问题是 css ，后台的东西不去。
看到后面有一个数据表。数据表的内容是可见的。当弹出窗口出现时，数据表的内容仍然在弹出窗口中可见。 popup的datat和datatable的data是重叠的。
我将 2 个属性添加到 div#driver_price_pop_up, display:none;边距：30px；请尝试我的示例，它对我来说很好