现在我在悬停时在同一个 div 上获取内容，我希望内容应该在悬停第一个 div 时显示在下一个 div 上

Question

现在我在悬停时在同一个 div 上获取内容，我希望内容应该在悬停第一个 div 时显示在下一个 div 上。 需要输出图像，请帮助解决这个问题。 在此输出中，我们有四个框，2X2 个框，我希望内容应在悬停时显示在下一个框上

 .four-divs { width: 322px; height: 151px; background-color: #000000; margin-left: 3px; margin-bottom: 6px; } .four-divs img { width: 25%; margin-left: auto; margin-right: auto; display: block; padding: 8px 0px; margin-bottom: 10px; } .global-mobility-strategy { float: left; } .assignment-policy-reference { float: right; } .client-projrct-tools { float: left; } .additional-assignment-references { float: right; } .mobility-opportunities { width: 100%; height: 151px; background-color: #000000; } .four-divs .inner-div-content { align-content: center; } .inner-div-content h3 { color: #FFFFFF; display: block; margin: 0 auto; padding: 0; font-size: 16px; /* font-family: open sand; */ text-align: center; margin-top: -10px; } .mobility-opportunities img { width: 13%; margin-left: auto; margin-right: auto; display: block; padding: 10px 0px; margin-bottom: 20px; } .image-container { float: left; overflow: hidden; position: relative; } .image-container .mask, .image-container .content { width: 322px; height: 151px; position: absolute; overflow: hidden; top: 0; left: 0; } .image-container img { display: block; position: relative; } .image-container a.info { text-decoration: none; padding: 0; text-indent: -9999px; width: 20px; height: 20px; background-color: black !important; color: white !important; padding: 6px 13px; text-align: center !important; } .effect .mask { opacity: 0; overflow: visible; box-sizing: border-box; // transition: all 0.4s ease-in-out; } .effect a.info { position: relative; top: 0px; /* Center the link */ opacity: 0; // transition: opacity 0.5s 0s ease-in-out; } .effect:hover .mask { opacity: 1; font-size: 13px; text-align: center; padding: 7px; background-color: #86BC25; } .effect:hover .mask h3 { font-weight: bold; font-size: 14px; margin: 0px; text-align: center; //padding: 6px; background-color: #86BC25; height: 30px; } .effect:hover a.info { opacity: 1; background-color: red; color: black; //transition-delay: 0.3s; }

 <div class="main-four-divs"> <div class="hover-div" style="width: 650px; height: 315px; background-color: #FFFFFF; "> <div class="global-mobility-strategy image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Global Mobility Strategy" /> <h3 style="line-height: 23px; font-weight: bold;"> Communications </h3> <img src="arrow-new.jpg" alt="arrow" style=" width: 5%; margin: -23px 0px -2px 296px; "> </div> <div class="mask"> <h3>Communications Toolkit</h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="assignment-policy-reference image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Assignment Policy References" /> <h3 style="line-height: 35px;font-weight: bold;">Assignment </h3> <img src="arrow-new.jpg" alt="arrow" style=" width: 5%; margin: -10px 0px -2px 296px; "> </div> <div class="mask"> <h3>Assignment</h3> <p style="height: 62px;margin: 28px 0px;color:#FFFFFF;font-size:14px;margin-top: -4px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="client-projrct-tools image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Client Project Tools" /> <h3 style="line-height: 35px;font-weight: bold;">Client Project</h3> <img src="arrow-new.jpg" alt="arrow" style=" width: 5%; margin: -10px 0px -2px 296px; "> </div> <div class="mask"> <h3 style="line-height: 35px;">Client Project </h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="additional-assignment-references image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Additional Assignment References" /> <h3 style="line-height: 35px;font-weight: bold;">Additional Assignment References</h3> <img src="arrow-new.jpg" alt="arrow" style=" width: 5%; margin: -10px 0px -2px 296px; "> </div> <div class="mask"> <h3 style="line-height: 35px;">Additional</h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s .</p> <a href="#" class="info">Read more</a> </div> </div> </div> </div>

Answer 1

您可以通过简单地修改和添加一些CSS来实现这种效果。 您可以使用transform: translateX();更改叠加框的位置transform: translateX(); 悬停父级时的CSS 。 并使用nth-child(even) CSS设置叠加的负位置

这是演示

 .four-divs { width: 322px; height: 151px; background-color: #000000; margin-left: 3px; margin-bottom: 6px; } .four-divs img { width: 25%; margin-left: auto; margin-right: auto; display: block; padding: 8px 0px; margin-bottom: 10px; } .global-mobility-strategy { float: left; } .assignment-policy-reference { float: right; } .client-projrct-tools { float: left; } .additional-assignment-references { float: right; } .mobility-opportunities { width: 100%; height: 151px; background-color: #000000; } .four-divs .inner-div-content { align-content: center; } .inner-div-content h3 { color: #FFFFFF; display: block; margin: 0 auto; padding: 0; font-size: 16px; /* font-family: open sand; */ text-align: center; margin-top: -10px; } .mobility-opportunities img { width: 13%; margin-left: auto; margin-right: auto; display: block; padding: 10px 0px; margin-bottom: 20px; } .image-container { float: left; /* overflow: hidden; */ position: relative; } .image-container .mask, .image-container .content { width: 322px; height: 151px; position: absolute; overflow: hidden; top: 0; left: 0; } .image-container img { display: block; position: relative; } .image-container a.info { text-decoration: none; padding: 0; text-indent: -9999px; width: 20px; height: 20px; background-color: black !important; color: white !important; padding: 6px 13px; text-align: center !important; } .effect .mask { opacity: 0; overflow: visible; box-sizing: border-box; // transition: all 0.4s ease-in-out; } .effect a.info { position: relative; top: 0px; /* Center the link */ opacity: 0; // transition: opacity 0.5s 0s ease-in-out; } .effect:hover .mask { opacity: 1; font-size: 13px; text-align: center; padding: 7px; background-color: #86BC25; transform: translateX(100%); z-index: 1; margin-left: 3px; } .effect:nth-child(even):hover .mask { transform: translateX(-100%); margin-left: -3px; margin-right: 0px; } .effect:hover .mask h3 { font-weight: bold; font-size: 14px; margin: 0px; text-align: center; //padding: 6px; background-color: #86BC25; height: 30px; } .effect:hover a.info { opacity: 1; background-color: red; color: black; //transition-delay: 0.3s; }

 <div class="main-four-divs"> <div class="hover-div" style="width: 650px; height: 315px; background-color: #FFFFFF;"> <div class="global-mobility-strategy image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Global Mobility Strategy" /> <h3 style="line-height: 23px; font-weight: bold;"> Communications </h3> <img src="arrow-new.jpg" alt="arrow" style="width: 5%; margin: -23px 0px -2px 296px;"> </div> <div class="mask"> <h3>Communications Toolkit</h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="assignment-policy-reference image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Assignment Policy References" /> <h3 style="line-height: 35px;font-weight: bold;">Assignment </h3> <img src="arrow-new.jpg" alt="arrow" style="width: 5%; margin: -10px 0px -2px 296px;"> </div> <div class="mask"> <h3>Assignment</h3> <p style="height: 62px;margin: 28px 0px;color:#FFFFFF;font-size:14px;margin-top: -4px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="client-projrct-tools image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Client Project Tools" /> <h3 style="line-height: 35px;font-weight: bold;">Client Project</h3> <img src="arrow-new.jpg" alt="arrow" style="width: 5%; margin: -10px 0px -2px 296px;"> </div> <div class="mask"> <h3 style="line-height: 35px;">Client Project </h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href="#" class="info">Read more</a> </div> </div> <div class="additional-assignment-references image-container four-divs effect"> <div class="inner-div-content"> <img src="icon-22.jpg" alt="Additional Assignment References" /> <h3 style="line-height: 35px;font-weight: bold;">Additional Assignment References</h3> <img src="arrow-new.jpg" alt="arrow" style="width: 5%; margin: -10px 0px -2px 296px;"> </div> <div class="mask"> <h3 style="line-height: 35px;">Additional</h3> <p style="height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s .</p> <a href="#" class="info">Read more</a> </div> </div> </div> </div>