我已经编写了应该隐藏页面中间的容器div的CSS,当左侧的列表div被悬停时。 我有一种感觉,给容器div一个固定的位置导致这一点,但我不太确定。代码似乎是正确的。将鼠标悬停在另一个div上时隐藏div
的Html
<section class="container">
<div class="description">
<h2>Writer</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p>
</div>
</section>
<div class="list">
<ul class="projectList">
<li class="projectImage"><a href="#">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></a></li>
</ul>
</div>
<div>
CSS
.container {
position:absolute;
justify-content:center;
align-items:center;
box-sizing:border-box;
display:flex;
width:500px;
left:325px;
align-content:space-around;
}
.list {
width:325px;
margin: 20px 30px 20px 0;
box-sizing:bordr-box;
overflow-x:hidden;
}
ul {
list-style-type:none;
margin:0;
padding:0
}
.projectImage img {
display:none;
}
.list .projectImage:hover img {
display: block;
margin: 0;
top: 20%;
left: 50%;
transform: translate(-50%);
position: absolute;
display: block;
/* width: 100%;
height: 100%; */
}
.list:hover + section.container {
display: none;
}
发表[MCVE]你的问题吧。不要指望或强迫我们去第三方网站查看您的代码。 – j08691