Problem with showing div when hovering

Question

Problem with showing div when hovering

I'm having trouble displaying a div on hover.

When I hover over the div element A, the div element B appears as expected. However, when the mouse pointer leaves the div element A, the div element B does not disappear.

 $('.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>

What am I missing?

javascript jquery html css

Answer 1

Answer №1

There are two solutions available using jquery or css

update:change p tag into div

Here's the CSS for the hover effect :

.display_cal:hover  >.calender_category_div{
  display:block;
  }

This will give you the toggle effect you desire.

or alternatively using jquery

$(document).ready(function (){
  $('.display_cal').mouseover(function(){
    $('.calender_category_div').show();
    })
  $('.display_cal').mouseleave(function(){
    $('.calender_category_div').hide();
    })

  })

updated example:

.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>

Answer 2

There are two solutions available using jquery or css

update:change p tag into div

Here's the CSS for the hover effect :

.display_cal:hover  >.calender_category_div{
  display:block;
  }

This will give you the toggle effect you desire.

or alternatively using jquery

$(document).ready(function (){
  $('.display_cal').mouseover(function(){
    $('.calender_category_div').show();
    })
  $('.display_cal').mouseleave(function(){
    $('.calender_category_div').hide();
    })

  })

updated example:

.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>

Answer 3

Answer №2

To make it work, insert the calendar_category_div within a div instead of a p tag. Then, using CSS, it will function properly without the need for jQuery.

.datespan{
  display: block;
}

.calendar_category_div{
  background: #FFFFFF;
  padding: 10px 20px;
  display: none;
}

.calendar_category_div ul{
  padding: 0;
}

.calendar_category_div ul a {
  color: #428bca;
  text-decoration: none;
}

.calendar_category_div ul a:hover {
  color: #428bca;
}

.calendar_category_div ul {
  color: #428bca;
  list-style-type: none;
}
.display_cal:hover .calendar_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="calendar_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>

Answer 4

To make it work, insert the calendar_category_div within a div instead of a p tag. Then, using CSS, it will function properly without the need for jQuery.

.datespan{
  display: block;
}

.calendar_category_div{
  background: #FFFFFF;
  padding: 10px 20px;
  display: none;
}

.calendar_category_div ul{
  padding: 0;
}

.calendar_category_div ul a {
  color: #428bca;
  text-decoration: none;
}

.calendar_category_div ul a:hover {
  color: #428bca;
}

.calendar_category_div ul {
  color: #428bca;
  list-style-type: none;
}
.display_cal:hover .calendar_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="calendar_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>

Answer 5

Answer №3

Here is the solution you require:

$(".event_section_div").hover(function(){
    $(".event_section_div").css("visibility", "hidden");
});

Answer 6

Here is the solution you require:

$(".event_section_div").hover(function(){
    $(".event_section_div").css("visibility", "hidden");
});

Problem with showing div when hovering

Answer №1

Answer №2

Answer №3

Similar questions

Tips for choosing the right element in CSS

Changing the Angular form based on the value selected from the drop-down menu

Designing with CSS: Achieving a full-width background image layered above content below the window

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Is there a way to efficiently retrieve and handle multiple $_POST records in PHP simultaneously?

What steps should I take to ensure that the login page functions properly?

Verify if the button is assigned a specific class, then generate a 'completed' div

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

convert an array of hexadecimal colors into an array of RGB colors

Adjusting the size of a Google map based on the size of the browser

What could be causing an issue with CORS in ExpressJS in one scenario but not in another?

Basic math tool using JSP/Servlet combination and Ajax

Angular's implementing Controller as an ES6 Class: "The ***Controller argument is invalid; it should be a function but is undefined."

Guide on transforming a Java multiclass applet into an HTML file

Clicking on the button will result in the addition of new

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

The expiration period set in expireAfterSeconds doesn't seem to be functioning as expected in the time-to-live (ttl) configuration. Rows are

Display the precise outcome for each division following a successful AJAX callback

Various redirects based on multiple referrers

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values