链接悬停时的jQuery Fadein图像
[英]jQuery fadein image on link hover
问题描述
I'm trying to create a simple menu, where hovering over different elements fades in a different image over the menu. 
我正在尝试创建一个简单的菜单，将鼠标悬停在不同的元素上会在菜单上的不同图像中消失。 My best guest was to create a jQuery, but it does not seem to work. 我最好的客人是创建一个jQuery，但似乎没有用。 Here is the script: 这是脚本：
$(document).ready(function() {
$("#pau").mouseover(function(){
$("#paup").show.fadeIn(600);
$("#pau").mouseout(function(){
$("#paup").fadeOut(600);
});
});
#pau div only defines the text part, over which an image should be faded in. And here is the div for the image I would like to get shown, when I hover over #pau: #pau div仅定义文本部分，在该部分上应淡入图像。这是当我将鼠标悬停在#pau上时要显示的图像的div：
#paup{
position:absolute;
display:none;
left:0;
right:0;
margin-top:90px;
width:100%;
}
HTML: HTML：
<!--This is a script to change opacity of img.-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"> </script>
<script>
$(document).ready(function() {
$("#pau").mouseover(function(){
$("#paup").fadeIn(600);
$("#pau").mouseout(function(){
$("#paup").fadeOut(600);
});
});
</script>
</head>
<body>
<div class='box'>
<div id="paup"><img src="./images/paulinemma.jpg"/></div>
<div class='logo'>#najforever</div>
<div class='people'>
<table style="width:100%" height="70px">
<tr>
<td>
<div id="pau">
<ul>
<li>redpoppy stories</li>
<ul class="sub-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Vimeo</a></li>
</ul>
</ul>
</div>
</td>
.....
Could you please advise why my script is not working? 您能告诉我为什么我的脚本不起作用吗？ Thanks 谢谢
2 个解决方案
解决方案1
1 2015-09-12 08:38:31
change 更改
$("#paup").show.fadeIn(600);
to 至
$("#paup").fadeIn(600);
Update : Please change the code in document.ready with 更新：请使用以下命令更改document.ready的代码
$(document).ready(function() {
$("#pau").mouseover(function(){
$("#paup").fadeIn(600);
});
$("#pau").mouseout(function(){
$("#paup").fadeOut(600);
});
});
you did not complete the callabck function in fadeIn 您没有在fadeIn中完成callabck函数
解决方案2
0 已采纳 2015-09-12 09:09:23
Seems like you have some syntax error: 似乎您有一些语法错误：
$(document).ready(function() {
$("#pau").mouseover(function(){
$("#paup").fadeIn(600);
});
$("#pau").mouseout(function(){
$("#paup").fadeOut(600);
});
});
Working Demo : http://jsfiddle.net/hro1e6kn/ 工作演示： http : //jsfiddle.net/hro1e6kn/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.