如何在悬停的div中顺利过渡？ [Tumblr更新标签]

Question

I am sure this has been answered before, but I am not sure where to look for it, nor how to really word the question. But basically, I am creating an updates tab for a tumblr theme and I'm curious as to how make a div smoothly transition in while hovering over a parent div, if that makes sense.

Essentially I would like the div to transition in smoothly when I hover over the tab like it does when I click on a tab in my updates tab in my blog . However this tab was created using a tutorial that used a jquery code to create the smooth opening effect, and I don't know anything about jquery or javascript on my own.

I have the general idea of how to make a div show only when you hover over the parent element by using display:none and display:block ... but it doesn't transition in smoothly, and as I've read there is no way to do so with CSS.

I have tried playing with height and opacity as well, but while it was a bit smoother, it was a rather messy transition with dealing with text and borders of the div I'm trying to show and hide.

Basically what I am asking is how I can create the same effect in my blog's updates tab that opens and closes when clicking on the tab, but using hover rather than click. I would love for the div to show when I'm hovered over the tab, as well as when my mouse is within the containing div, but close once my mouse leaves the tab. Sorry if that sounds confusing.

Here is the CSS:

 #tab{ margin:auto; } .tab{ margin-top:0px; margin-bottom:2px; margin-left:-5px; margin-right:-5px; padding:7px; border:1px solid #000000; text-align:center; } #tab:hover .contents{ display:block; } .contents{ display:none; margin-top:3px; margin-bottom:3px; margin-left:10px; margin-right:10px; padding:5px; border:1px solid #000000; text-align:center; font-size:11px; } 

Here is the HTML for that CSS:

  <div id="tab"> <div class="tab">Tab</div> <div class="contents"> Tab Contents. </div> </div> 

Jquery/ or javascript? From the tutorial from my blog's updates tab:

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".inside").hide(); $(".label").click(function(){ $(this).next(".inside").slideToggle('slow'); }); }); </script> 

Answer 1

You can use CSS3 transition-property to add 'smooth' effect. The only 'problem' with that , it doesnt work on IE9 and earlier versions. You can see example of that: here

Answer 2

You can probably do it like this. Use opacity instead for the display and transition. I added some pointer-event and make it none so once it is hidden, by the opacity, you can't interact it, which act like display: none .

 #tab{ margin:auto; } .tab{ margin-top:0px; margin-bottom:2px; margin-left:-5px; margin-right:-5px; padding:7px; border:1px solid #000000; text-align:center; } #tab:hover .contents{ opacity: 1.0 } .contents{ opacity: 0.0; margin-top:3px; margin-bottom:3px; margin-left:10px; margin-right:10px; padding:5px; border:1px solid #000000; text-align:center; font-size:11px; transition: opacity 100ms ease-in-out; pointer-events: none; } 

Answer 3

As an alternative, if the CSS3 transition does not work, you can try this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){ 
  $(".inside").hide(); 
  $(".label").click(function(){ 
    $(this).next(".inside").slideToggle('slow'); 
  }); 

  $(document).on("hover", ".label", function(){
    $(this).next(".inside").slideToggle('slow'); 
  });
}); 
</script>