jQuery——将title属性用作悬停的文本,但只在同一父类中使用。
Need some help coming up with this jQuery, at one point I almost had it working except the title was placed as text in every <p class="category-flag-text"></p>
on the page not just within the article, but have been unable to even get back to that point.
需要一些帮助来完成这个jQuery,我几乎让它工作了,除了标题被放置在页面上的每一个
,而不仅仅是在文章中,甚至无法回到那个点。When hovering over .category-icons a
I want to use the title attribute of .category-icons a
as text for <p class="category-flag-text"></p>
within the same parent article.
当鼠标悬停在.category-图标a时,我想使用.category-图标a的标题属性,作为
在同一父文章中的文本。<article class="post-1">
<div class="category-flags">
<p class="category-flag-text"></p>
</div>
<div class="category-icons">
<a href="http:/www..." title="Category One">
<img src="http:/www..." alt="Category One" title="Category One">
</a>
<a href="http:/www..." title="Category Two">
<img src="http:/www..." alt="Category Two" title="Category Two">
</a>
</div>
</article>
<article class="post-2">
<div class="category-flags">
<p class="category-flag-text"></p>
</div>
<div class="category-icons">
<a href="http:/www..." title="Category One">
<img src="http:/www..." alt="Category One" title="Category One">
</a>
<a href="http:/www..." title="Category Two">
<img src="http:/www..." alt="Category Two" title="Category Two">
</a>
</div>
</article>
2 个解决方案
#1
1
Fairly straightforward. Just use $(this).closest('article')
to locate the closest article ancestor. Then, you can find the <p>
you want.
相当简单。使用$(this).最近的('article')来定位最近的文章祖先。然后,您可以找到您想要的
。
$(".category-icons a").on('mouseover', function () {
$(this).closest('article').find('.category-flag-text')
.text($(this).attr('title'));
}).on('mouseout', function () {
$(this).closest('article').find('.category-flag-text').text('');
});
http://jsfiddle.net/ExplosionPIlls/bnB5h/
http://jsfiddle.net/ExplosionPIlls/bnB5h/
更多相关文章
- 如何更改Gmaps.js在Google地图中使用的图标?
- 【HTML&CSS】【7】网址栏左侧出现的图标Icon
- “/图标。ico " vs
- 图标旋转但返回上一个位置
- jQuery更改活动类图标的状态
- 如何配置使用CAS的PHP客户端--迁移文章(blogspot爱你不容易)
- php下删除一篇文章生成的多个静态页面
- 《PHP高级知识进阶》系列技术文章整理收藏
- mysql 第二十四篇文章~相关分片功能的测试四