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

Question

这是我的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 包含一个弹出窗口，当用户鼠标悬停在特定的东西上时出现，当鼠标悬停时消失-move.The head_popup_price 是 class 分配给弹窗的头部，popup_body_price 是 class 分配给弹窗的正文 popup.The 问题是弹窗来的时候，其背后的数据也是可见的。数据不应该 visible.I 尝试将 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>

Answer 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 内容的示例。试一试

Answer 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;
}

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

How to hide the data behind the popup which appears on mouse hover?

html

css

popup