悬停时显示div的问题

时间:2016-11-04 09:23:15

标签: javascript jquery html css

我正面临悬停时显示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>
&#13;
&#13;
&#13;

我缺少什么?

3 个答案:

答案 0 :(得分:0)

有两个解决方案是通过 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();
    })

  })

更新示例:

&#13;
&#13;
.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;
      }
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要在calender_category_div内添加p。将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>

答案 2 :(得分:0)

这就是你需要的:

$(".calender_category_div").mouseleave(function(){
    $(".calender_category_div").css("display", "none");
});