英文:
Present am getting content on same div on hover, i want content should show on next div on hover the first div
问题
在鼠标悬停在第一个 div 上时，当前我正在获取相同 div 上的内容，我希望在鼠标悬停在第一个 div 上时内容应该显示在下一个 div 上。所需输出图像，请帮助解决这个问题。在此输出中，我们有四个框，2X2 的框，我希望在鼠标悬停时内容应该显示在下一个框上。
在这段代码中，我只使用了 HTML 和 CSS，所以我想在这里做一个小改变，只需在鼠标悬停时显示内容在下一个 div 上。
英文:
Present am getting content on same div on hover, I want content should show on next div on hover the first div.required output image,please help on this issue. In this output we have four boxes, 2X2 boxes, I want content should show on next box on hover
In this code, I just used HTML and CSS so I want small change in this , just show the content on next div on hover
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
您可以通过简单地修改和添加一些CSS来实现这个效果。当鼠标悬停在父元素上时，您可以使用transform: translateX(); CSS来更改覆盖框的位置，并使用nth-child(even) CSS来设置覆盖的负位置。
以下是示例代码：
.four-divs {
/* 其他样式属性 */
}
/* 其他样式规则 */
.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;
}
/* 其他样式规则 */
希望对您有所帮助！
英文:
You can achieve this effect by simply modify and add some CSS. You can change overlay box position using transform: translateX(); CSS when you hover the parent. And set negative position of overlay using nth-child(even) CSS
Here is Demo
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论