Question

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

旁注：我希望CSS能够成为一种风格。（一种给定的。）另外，我尝试使用一些例子，但我很匆忙所以请和你一起。

Answer 1

如果你使用jQuery，那就像：

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

Answer 2

试试这个：

<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

顺便问一下，你希望它如何成为CSS样式？

Answer 3

试试这个： http://jsfiddle.net/2WYtS/

Answer 4

您还可以使用fadeIn（）和fadeOut（）方法。 Link

Answer 5

使用CSS您可以使用不透明度更改淡出

试试这个

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

如何在悬停时淡入div？

5 个答案: