在jQuery中淡出
我想添加一个Jquery函数来更新一个链接悬停在我的html结构跨度内的div
<ul><li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/aruna">Aruna </a>
</span>
<div style="display: none;" class="image_hover">
Student
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
<li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/jasmine">jasmine </a>
</span>
<div style="display: none;" class="image_hover">
Professor
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
</ul>
我写的jQuery是
我写过
jQuery(document).ready(function(){
var _selectedLinkEl = null;
var _detailEl = null;
var body = jQuery("body");
var elem=null;
jQuery(".user-link").mouseover(function(event) {
_selectedLinkEl = this;
_detailEl=jQuery(event.target).parent().next();
//_detailEl.show();
_detailEl.fadeIn("slow");
elem=jQuery(this).parent().next();
_href=jQuery(this).attr('href').split("/")[2];
jQuery.post('/users/user_detail/?name='+_href,
function(data){
//elem.html(data).show();
elem.html(data).fadeIn("slow");
});//post
body.mouseover(_bodyMouseOverFunction);
}); // user-link
var _bodyMouseOverFunction = function(event) {
if(event.target != _selectedLinkEl &&
event.target != _detailEl &&
jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {
//_detailEl.hide();
_detailEl.fadeOut("slow");
body.unbind("mouseover", _bodyMouseOverFunction);
}
};// mouseover
});
上面的jquery更新了image-hover div，并通过fadeIn显示div，但它在任何时候都渐渐淡出。
我试图淡出DIV image_hover只有当我的鼠标悬停超出div（image_hover）或任何正文元素..
在这种情况下，如果我的鼠标位于链接或div上或div（image_hover）内的任何元素上，Div应该不会淡出。
请为此提供建议/。
怎么做？
您的HTML是问题的一部分。 为了解决这个问题，需要保持打开状态的区域必须存在于触发器标签中，但我注意到了其他一些情况：
因此，我改变了您的HTML并在下面创建了可能的解决方案。 这将执行打开“详细信息”区域的期望行为（并在悬停时保持打开状态）。
另外，您并不需要隐藏“详细信息”区域......但无论如何，我都会将它留给您。
与此同时，考虑以下潜在的解决方案：
<html>
<head runat="server">
<title></title>
<script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>
<style type="text/css">
.vCard
{
font-family: Arial;
}
.vCard a
{
text-decoration: none;
}
.vCard a.owner
{
color: Green;
}
.vCard span.timeline
{
color:Navy;
}
.vCard span.timeline div.type
{
display: none;
}
.vCard span.timeline div.type div.details
{
display: none;
margin-left: 20px;
}
</style>
<script type="text/javascript">
function hoverIn() {
var card = jQuery(this).parent();
var cardType = jQuery('div.type', card);
cardType.fadeIn('fast', function() {
var cardTypeDetails = jQuery('div.details', this);
cardTypeDetails.fadeIn('Fast');
});
}
function hoverOut() {
var card = jQuery(this).parent();
var cardType = jQuery('div.type', card);
cardType.fadeOut('fast', function() {
var cardTypeDetails = jQuery('div.details', this);
cardTypeDetails.fadeOut('Fast');
});
}
jQuery(document).ready(function() {
var context = jQuery('#myList');
// This will target the SPECIFIC timeline object(s).
jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="myList">
<li>
<div class="vCard">
by
<a class="owner" href="/users/aruna">Aruna </a>
<span class="timeline">
about 1 hours ago
<div class="type">
<a href="#">Student</a>
<div class="details">
<div>
Employee ID:<label></label>
</div>
<div>
Project Name:<label></label>
</div>
<div>
Project Role:<label></label>
</div>
<div>
Supervisor Name:<label></label>
</div>
</div>
</div>
</span>
</div>
</li>
<li>
<div class="vCard">
by
<a class="owner" href="/users/jasmine">Jasmine </a>
<span class="timeline">
about 2 days ago
<div class="type">
<a href="#">Professor</a>
<div class="details">
<div>
Employee ID:<label></label>
</div>
<div>
Project Name:<label></label>
</div>
<div>
Project Role:<label></label>
</div>
<div>
Supervisor Name:<label></label>
</div>
</div>
</div>
</span>
</div>
</li>
</ul>
</form>
</body>
</html>
上一篇: fadeout in jQuery
下一篇: Formatting a number with exactly two decimals in JavaScript