Twitter Bootstrap Question posted in

Twitter bootstrap – Html hidden div overlays

Okay so I was wondering if there is a way for me to make something that when I hover over the div, it will show a hidden div. I am using twitter bootstrap and here is my div that I want to do this with. 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">



<div class="jumbotron text-center">
                    <h2>This is the title of the first info</h2>
                    <h5>Hover to see info</h5>
</div>
Tags:

2

Answers


  1. 0

    If you’re using bootstrap you can use a popover for this:

    http://getbootstrap.com/javascript/#popovers

    Otherwise you can use jQuery to do a generic hide/show:

    $('.hover-element').on('hover',
  function () {
    $('.hidden-element').show();
  }, 
  function () {
    $('.hidden-element').hide();
  }
);
    Login or Signup to reply.
  2. 0

    Pretty straightforward with CSS selectors:

    <div class="jumbotron text-center">
    <h2>This is the title of the first info</h2>
    <h5>Hover to see info</h5>
    <div class="myHiddenDiv"></div>
</div>


    .myHiddenDiv {
   display: none
}

.jumbotron:hover .myHiddenDiv {
   display:block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search