如何褪色在悬停的div？ [英] How to fade in a div on hover?

问题描述

我想将鼠标悬停在图片上，并在其中放入一个文字以淡入。简单。

旁注：我希望它可以通过CSS进行样式化。 （一种给定的。）另外，我尝试使用一些例子，但我匆忙所以请和谢谢。

试试这个：

 < div class =hover> 
< img src =http://www.google.com/intl/zh-CN/ALL/images/srpr/logo1w.pngalt =google/> 
< / div> 
< div class =fadestyle =display：none> 
此文字将淡入和淡出。 
 $ lt; / div> 
 
 $（document）.ready（function（）
 {
 $（div.hover）。hover（
 $函数（）{
 $（div.fade）。fadeIn（'slow'）; 
}，
 function（）{
 $（div.fade ）.fadeOut（'slow'）; 
} 
）; 
}）; 
  

此处的示例代码

顺便说一下，您希望如何将其设置为CSS样式？

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.

解决方案

Try this:

<div class="hover">
    <img src="http://www.google.com/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?

这篇关于如何褪色在悬停的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！