我想要一个 div,它本身有 2 个 div,并且底部 div 被隐藏,直到你将鼠标悬停在它上面。
<div class="div_wrapper">
<div class="div_one">Image</div>
<div class="div_two">description</div>
</div>
描述是隐藏的,直到您将鼠标悬停在图像上然后它显示在其下方,当您将鼠标悬停在图像或描述上时,它们的描述将返回隐藏。
我想要一个 div,它本身有 2 个 div,并且底部 div 被隐藏,直到你将鼠标悬停在它上面。
<div class="div_wrapper">
<div class="div_one">Image</div>
<div class="div_two">description</div>
</div>
描述是隐藏的,直到您将鼠标悬停在图像上然后它显示在其下方,当您将鼠标悬停在图像或描述上时,它们的描述将返回隐藏。
您可以使用 CSS 完成此操作:
.div_two { display: none; }
.div_one:hover + .div_two { display: block; }
如果您使用 jQuery,则可以使用以下代码:
var div_two = $('.div_two');
$('.div_one').mouseenter(function() {
div_two.show();
}).mouseleave(function() {
div_two.hide();
});
它应该有CSS
.div_two { display: none; }
或者如果您将第二个 div 放入第一个,您可以使用 css 显示隐藏它们
<div class="div_wrapper">
<div class="div_one">Image
<div class="div_two">description</div>
</div>
</div>
和CSS:
.div_two { display: none; }
.div_one:hover .div_two { display: block; }
您可以使用visibility:hidden
和visible
这是你想要的 CSS
.div_two {
visibility: hidden;
}
.div_one:hover + .div_two {
visibility: visible;
}