如何隱藏鼠標懸停時彈出窗口後面的數據？

這是我的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是分配給類彈出框的頭部，popup_body_price是分配給彈出框體的類。問題是當彈出框出現時，後面的數據也是可見的。數據不應該是可見的。我試着給0123_給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>

來源

2016-02-24 Ananddon

請創建一個小提琴。 – dorado

請把html代碼 –

@haithamsha包含在html代碼中。 – Ananddon

試試這個。其實你接近你的結果

<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內容的示例。試試吧

來源

2016-02-24 08:47:10 Gopalakrishnan

試試這個工作我，但我的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; 
}

來源

2016-02-24 09:06:52

即使我使用了同樣的腳本.... – Ananddon

它適合你嗎？ –

JavaScript工作正常。問題是CSS，背景事情不會發生。 – Ananddon

如何隱藏鼠標懸停時彈出窗口後面的數據？

回答

相關問題