[英]Issue with display div on hover
我在懸停時顯示div時遇到問題。
當我將鼠標懸停在div
元素A
,將按照我的期望顯示div
元素B
但是,當鼠標指針離開div
元素A
, div
元素B
不會消失。
$('.display_cal').hover(function () { $('.calender_category_div').css("display" , "block"); });
.datespan{ display: block; } .calender_category_div{ position: absolute; top: 40%; left: 50%; z-index: 1050; background: #FFFFFF; padding: 10px 20px; display: none; } .calender_category_div ul{ padding: 0; } .calender_category_div ul a { color: #428bca; text-decoration: none; } .calender_category_div ul a:hover { color: #428bca; } .calender_category_div ul { color: #428bca; list-style-type: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <p style="float: right;color: #17469e;" class="display_cal">12 october 2016</p> <div class="calender_category_div" > <ul> <a id="fl_ical" href="http://addtocalendar.com/atc/ical?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>iCalendar</li></a> <a id="fl_google" href="http://addtocalendar.com/atc/google?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>Google Calendar</li></a> </ul> </div>
我缺少什么?
通過jQuery或CSS有兩個解決方案
更新 :將p
標簽更改為div
css的懸停效果:
.display_cal:hover >.calender_category_div{
display:block;
}
它會為您提供toggle
效果。
或使用jQuery
$(document).ready(function (){
$('.display_cal').mouseover(function(){
$('.calender_category_div').show();
})
$('.display_cal').mouseleave(function(){
$('.calender_category_div').hide();
})
})
更新的示例:
.datespan{ display: block; } .calender_category_div{ position: absolute; top:5px; right:-10; z-index: 1050; background: transparent; padding: 10px 20px; display: none; } .display_cal:hover >.calender_category_div{ display:block; } .calender_category_div ul{ padding: 0; } .calender_category_div ul a { color: #428bca; text-decoration: none; } .calender_category_div ul a:hover { color: #428bca; } .calender_category_div ul { color: #428bca; list-style-type: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <div style="float: right;color: #17469e;" class="display_cal">12 october 2016 <div class="calender_category_div" > <ul> <a id="fl_ical" href="http://addtocalendar.com/atc/ical?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>iCalendar</li></a> <a id="fl_google" href="http://addtocalendar.com/atc/google?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>Google Calendar</li></a> </ul> </div> </div>
您需要在p
內添加calender_category_div
。 將p
替換為div
標簽。 然后在css
幫助下它將起作用。 無需編寫jquery
.datespan{ display: block; } .calender_category_div{ background: #FFFFFF; padding: 10px 20px; display: none; } .calender_category_div ul{ padding: 0; } .calender_category_div ul a { color: #428bca; text-decoration: none; } .calender_category_div ul a:hover { color: #428bca; } .calender_category_div ul { color: #428bca; list-style-type: none; } .display_cal:hover .calender_category_div{display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <div style="float: right;color: #17469e;" class="display_cal">12 october 2016 <div class="calender_category_div" > <ul> <a id="fl_ical" href="http://addtocalendar.com/atc/ical?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>iCalendar</li></a> <a id="fl_google" href="http://addtocalendar.com/atc/google?f=m&e[0][date_start]=2016-12-02%2009%3A00%3A00&e[0][date_end]=2016-12-02%2018%3A30%3A00&e[0][timezone]=Pacific%2FPitcairn&e[0][title]=StartupBridgeIndia&e[0][description]=StartupBridge%20India%20conference%20aims%20to%20foster%20cross-border%20partnerships%20%26%20collaboration%2C%20and%20open%20up%20investment%2Facquisition%20opportunities%20for%20US%20Tech%20companies%20in%20India.%20The%20event%20is%20organized%20by%20TiE%20Silicon%20Valley%2C%20iSPIRT%2C%20and%20Stanford%20Center%20for%20International%20Development%20(SCID)%20and%20will%20be%20held%20on%20December%202nd%202016%20at%20Stanford%20University.&e[0][location]=SIEPR%2C%20Stanford%2C%20CA&e[0][organizer]=iSPIRT%2C%20TIE%20%26%20SIEPR&e[0][organizer_email]=rajan%40ispirt.in&e[0][privacy]=public" target="_blank"><li>Google Calendar</li></a> </ul> </div> </div>
這是您需要的:
$(".calender_category_div").mouseleave(function(){
$(".calender_category_div").css("display", "none");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.