我有两个盒子,一个隐藏,一个可见。我希望当默认盒子悬停时,它会淡出并且display为none的盒子会变得可见。
这是代码,链接,但它并不按照我想要的方式工作,因为当第一个盒子悬停时,它仍然可见,而我希望它变成display:none。
这是代码,链接,但它并不按照我想要的方式工作,因为当第一个盒子悬停时,它仍然可见,而我希望它变成display:none。
.box1, .box2{
width:100px;
height 100px;
border:1px solid black;
text-align:center;
}
.box1{
display: block;
}
.box2{
display: none;
}
.box1:hover ~ .box2{
display:block;
}
<div class="box1">
<p>data 1</p>
</div>
<div class="box2">
<p>data 2</p>
</div>
如果盒子切换时能够使用动画效果,那就更好了。
类似的问题已经有人问过,但他们都要求使用JavaScript。我更喜欢只使用CSS。
有什么建议吗?先谢谢了。
.wrapper
类中使用-webkit-transition: display 600ms ease 0ms;
,但是无法生效。 - DannyBoydisplay: none
中transition
不起作用,如果您想要过渡效果,应该使用另一种触发显示的方式。 - Carl Binalla