javascript 如何在悬停时淡入 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3878027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fade in a div on hover?
提问by Darlene Conner
I want to hover on an image, and have a div with text in it to fade in. Simple.
我想将鼠标悬停在图像上，并有一个带有文本的 div 淡入。简单。
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.
旁注：我希望它可以通过 CSS 设置样式。（有点给定。）另外，我尝试使用一些示例，但我很着急，所以请和谢谢。
回答by jps
If your using jQuery, Something like:
如果您使用 jQuery，则类似于：
$('element').hover(function()
{
$('div').animate({ 'opacity': 1 });
});
回答by bla
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');
}
);
});?
By the way, how do you want it to be CSS stylable?
顺便说一句，您希望它如何成为 CSS 样式？
回答by Akhilraj N S
Using CSS You can change fade out using opacity
使用 CSS 您可以使用不透明度更改淡出
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;
}
回答by malckier
Try this: http://jsfiddle.net/2WYtS/
试试这个：http: //jsfiddle.net/2WYtS/
