[英]Hover over div to reveal nested span with jQuery
I thought this would work outright, but I must be missing something. 我以为这可以完全解决问题,但我必须缺少一些东西。
I have a nested span
of content in a div and I'm trying to get that span to show on hover (and hide on mouseout). 我在div中有一个嵌套的内容span
,并且我试图使该范围在悬停时显示(并在mouseout上隐藏)。
I thought that just doing a $(this).find('.name-of-span') inside of a
hover` function would do it, but something must be missing. 我以为只是在悬停函数$(this).find('.name-of-span') inside of a
执行$(this).find('.name-of-span') inside of a
就能做到,但是一定要缺少一些东西。
This is what I have: 这就是我所拥有的:
HTML: HTML:
<div class="parent-item">
<h3>title 01</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
<div class="parent-item">
<h3>title 02</h3>
<span class="meta--reveal">
<a class="btn" href="#">Link</a>
</span>
</div>
JS: JS:
$('.parent-item').hover(function() {
$(this).find('.meta--reveal').show();
});
I thought that should work, but again, I'm probably missing something. 我认为应该可以,但是再次,我可能会丢失一些东西。
I also tried to do this with CSS with an adjacent sibling selector, but that wasn't working either. 我也尝试使用带有相邻兄弟选择器的CSS来做到这一点,但这都不起作用。
You can construct a CSS rule that only hides the nested element if the parent is not hovered. 您可以构造一个CSS规则,该规则仅在父对象未悬停时才隐藏嵌套元素。
.parent-item:not(:hover) .meta--reveal { display: none; }
<div class="parent-item"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div>
Otherwise, your existing logic does work. 否则,现有的逻辑确实工作。 You're just missing the second method that reverts the show. 您只是缺少第二种还原显示的方法。
$('.parent-item').hover(function() { $(this).find('.meta--reveal').show(); }, function(){ $(this).find('.meta--reveal').hide(); });
.parent-item .meta--reveal { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent-item"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div>
this is working. 这正在工作。 First, the going to show element must be 'display: none'. 首先,将要显示的元素必须为“ display:none”。
$('.parent-item').hover(function() { $(this).find('.meta--reveal').show(); });
.meta--reveal { display:none; }
<div class="parent-item"> <h3>title 01</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <div class="parent-item"> <h3>title 02</h3> <span class="meta--reveal"> <a class="btn" href="#">Link</a> </span> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Also usable children()
instead of find()
也可以使用children()
而不是find()
Hide all the link before displaying the selected one. 隐藏所有链接,然后显示所选链接。
$('.parent-item').hover(function() {
//hide all the link before displaying the selected one.
$('.meta--reveal').hide();
//displays the selected item
$(this).find('.meta--reveal').show();
});
Use jQuery to add and remove classes to toggle display, teamed up with the '.children' for targeted selection 使用jQuery添加和删除类以切换显示,与'.children'一起进行有针对性的选择
$(document).ready(function() { $(".hover").mouseover(function() { $(this).children('.target').removeClass("hide").addClass("reveal"); }); $(".hover").mouseleave(function() { $(this).children('.target').removeClass("reveal").addClass("hide"); }); });
.hide { display: none; } .reveal { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hover"> <h3>title 01</h3> <div class="target hide"> <span class="metaReveal"><a class="btn" href="#">Link</a></span> </div> </div> <div class="hover"> <h3>title 02</h3> <div class="target hide"> <span class="metaReveal"><a class="btn" href="#">Link</a></span> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.