javascript - How to fade in a div on hover? - Stack Overflow

admin管理员组

文章数量:1349174

I want to hover on an image, and have a div with text in it to fade in. Simple.

Sidenote: I want it to be style-able by CSS. (Kind of a given.) Also, I tried using some examples but I am in a hurry so please and thankyou.

I want to hover on an image, and have a div with text in it to fade in. Simple.

Sidenote: I want it to be style-able by CSS. (Kind of a given.) Also, I tried using some examples but I am in a hurry so please and thankyou.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 7, 2010 at 1:25 Darlene Conner asked Oct 7, 2010 at 1:09 Darlene ConnerDarlene Conner 111 gold badge11 silver badge11 bronze badge 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

If your using jQuery, Something like:

$('element').hover(function()
{
    $('div').animate({ 'opacity': 1 });
}); 

Try this:

<div class="hover">
    <img src="http://www.google./intl/en_ALL/images/srpr/logo1w.png" alt="google" />
</div>
<div class="fade" style="display:none">
    This text will Fade In and Out.
</div>​

$(document).ready(function()
{    
    $("div.hover").hover(
      function () {
        $("div.fade").fadeIn('slow');
      }, 
      function () {
        $("div.fade").fadeOut('slow');
      }
    );
});​

Sample code here

By the way, how do you want it to be CSS stylable?

Try this: http://jsfiddle/2WYtS/

You can also use the fadeIn() and fadeOut() methods. Link

Using CSS You can change fade out using opacity

try This

.box{
    width: 180px;
    text-align: center;
    background-color: #fff;
    padding: 5px 10px;
    z-index: 10;
    font-weight: bold;
    color:#000;
}

.box:hover{
        opacity: 0.7;
}

本文标签： javascriptHow to fade in a div on hoverStack Overflow