- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试添加一个 Jquery 函数,用于在跨度内的链接悬停时更新 div我的html结构是
<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>
关于jquery - jQuery 中的淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4333713/
我正在尝试剪切和淡出 mp3 文件的最后 4 秒: avconv -i SPEX_pilot_02.mp3 -t 0:0:25 -filter:a fade=t=out:st=21:d=4 prete
我有一个连续的 HTML 元素列表。每个列表项都包含超链接内的图像,如下所示: 当您将鼠标悬停在列表项上时,我本质上想使用 jQuery 淡入包含链接标题的工具提示。因此,当您将
我有一个视频文件和一个音频文件。 我想将它们合并在一起,最终输出的视频将在视频的长度内,并将包含背景中的音频。 我做了: ffmpeg -i output.avi -i bgmusic.mp3 -fi
我有一个生成的超大图表,我将其放入 ScrollView,以便用户可以向右滚动并查看所有值。我想通过淡出 ScrollView 向用户表明右侧还有“更多内容”。通过应用 CAGradientLayer
我目前正在使用此代码来尝试使用具有 .info 类的按钮作为淡入和淡出文本的切换开关。现在动画正在与此代码连续运行。有没有一种方法可以让我单击按钮一次并使文本淡入,而不会在几秒钟后淡出?当您再次单击该
当我的 iPhone 界面旋转时,我想对 UIViewController 的特定 UIView 进行淡入/淡出...就像... - (void)willRotateToInterfaceOrient
所以事情就是这样。我看到这个网站:http://laneandassociates.co/english-mustard-scottish-oats我完全不明白他们是如何做到淡入淡出的。 其淡入淡出效
现在我有这个(只是增加标签的 alpha,中间有小中断): ae.getErrorLabel().setVisible(true); ae.getErr
我在 jQuery 中做了一些简单的 .hover(function() 语句。当我将鼠标悬停在文本上时,我只想要一个 #div.fadeIn,并且在非悬停时淡出。它有效。但这只是如果我发送垃圾邮件悬
我是 jQuery 新手,因此我正在不断学习。 在我创建的网站上,有两个功能似乎相互冲突:第一个功能是当用户开始滚动时网站标题会淡出,第二个功能是在 anchor 之间平滑滚动这一页。第二个脚本使淡出
我使用标题值在单击按钮时显示/隐藏一些 div。第一个按钮将仅显示具有 ab 值的 div,第二个按钮将显示所有 div。一切(有点)都有效,但是当显示所有 div 时,fadeOut/In 会产生令
我试图让一些文本淡出 1000 毫秒,等待 1000 毫秒,将文本更改为数组中的随机条目,然后淡入 1000 毫秒。文本应该在淡出之前不间断地停留 5 秒。 我已经设法更改文本,但我还没有找到如何使其
我收到一条错误消息,如果提交表单并返回错误,则会显示该消息。 表单检查.php jQuery('#error', window.parent.document).html( "There was
我有大约 20 张不同的图像,我想在 4 个框中淡入淡出。我需要它从图像列表中随机选择一个图像并显示它。 框示例 photo1、photo2、photo3、photo4 是它们的名称。它们需要根据其绝
我有一个 ID 为“blog-container”的包含 div,以及其中的一组子 div,其类为“blog-item”。 我想要做的是将“博客容器”中的所有“博客项目”一一淡出,一个接一个,然后以相
我找到并修改了一种创建文本到图像翻转的好方法,在这里:http://jsfiddle.net/pkZAW/12/ $( function() { $("#imglink").hover(
函数检查 session (){ $.ajax({url: "session.php", 成功: 函数(数据){ 如果(数据== 1){ var postFilen = 'msg.php'; $.po
需要一些建议:我想创建一个 fadeIn/fadeOut 脚本,它可以在页面滚动时响应地工作。我想做什么: 滚动时,一旦到达隐藏的 div,它就会淡入。 一旦滚动到达页面顶部,它就会淡出。 任何 fu
当 scrollToTop 超过 1000px 时,我有以下内容应该使 .secondLogo 出现(通过淡入) var secondLogo = $(".secondLogo"); $(window
我有一个音乐脚本,但是当我按下空格又名暂停按钮时,我希望它暂停它已经播放的音乐,但我希望它像 spotify 一样以淡入/淡出的方式播放 这是我到目前为止的代码: var play = true; v
我是一名优秀的程序员,十分优秀!