您好,我试图通过将鼠标悬停在菜单列表上来显示和隐藏卡片的特定部分,我可以使用 css 隐藏卡片,但无法通过特定类的 css 的 display:block 属性来显示它...
HTML
导航菜单
<div class="d-flex justify-content-center">
<ul class="nav">
<li class="nav-item">
<a class="nav-link itemOne" href="#">Product 1</a>
</li>
<li class="nav-item">
<a class="nav-link itemTwo" href="#">Product 2</a>
</li>
</ul>
</div>
卡片科
<div class="card item1" style="width:12rem;">
<img class="card-img-top item" src="../image1" alt="Card image cap">
<div class="card-body item1">
<h5 class="card-title item1">Card title</h5>
<p class="card-text item1">This is a wider card with supporting text
below as a natural lead-in to additional content. This content is a little
bit longer.</p>
</div>
</div>
<div class="card item2" style="width:12rem;">
<img class="../image2" alt="Card image cap">
<div class="card-body item2">
<h5 class="card-title item2">Card title</h5>
<p class="card-text item2">This is a wider card with supporting text below
as a natural lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
CSS
.item1{
display:none;
}
.item2{
display:none;
}
.itemOne:hover .item1{ //Not displaying item 1
display:block;
}
.itemTwo:hover .item2{ //Not displaying item 2
display:block;
}
我将使用 jQuery 来完成此任务。
CSS:
.item1, .item2 {
display: none;
}
jQuery
$('.itemOne').hover(function() {
$('.item1').toggle();
});
$('.itemTwo').hover(function() {
$('.item2').toggle();
});
这是一个example https://jsfiddle.net/aq9Laaew/5937/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)