我想让内容在第一个 div 上悬停时显示在下一个 div 上。

huangapple
go评论108阅读模式
英文:

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 -->

  1. .four-divs {
  2.   width: 322px;
  3.   height: 151px;
  4.   background-color: #000000;
  5.   margin-left: 3px;
  6.   margin-bottom: 6px;
  7. }
  9. .four-divs img {
  10.   width: 25%;
  11.   margin-left: auto;
  12.   margin-right: auto;
  13.   display: block;
  14.   padding: 8px 0px;
  15.   margin-bottom: 10px;
  16. }
  18. .global-mobility-strategy {
  19.   float: left;
  20. }
  22. .assignment-policy-reference {
  23.   float: right;
  24. }
  26. .client-projrct-tools {
  27.   float: left;
  28. }
  30. .additional-assignment-references {
  31.   float: right;
  32. }
  34. .mobility-opportunities {
  35.   width: 100%;
  36.   height: 151px;
  37.   background-color: #000000;
  38. }
  40. .four-divs .inner-div-content {
  41.   align-content: center;
  42. }
  44. .inner-div-content h3 {
  45.   color: #FFFFFF;
  46.   display: block;
  47.   margin: 0 auto;
  48.   padding: 0;
  49.   font-size: 16px;
  50.   /* font-family: open sand; */
  51.   text-align: center;
  52.   margin-top: -10px;
  53. }
  55. .mobility-opportunities img {
  56.   width: 13%;
  57.   margin-left: auto;
  58.   margin-right: auto;
  59.   display: block;
  60.   padding: 10px 0px;
  61.   margin-bottom: 20px;
  62. }
  64. .image-container {
  65.   float: left;
  66.   overflow: hidden;
  67.   position: relative;
  68. }
  70. .image-container .mask,
  71. .image-container .content {
  72.   width: 322px;
  73.   height: 151px;
  74.   position: absolute;
  75.   overflow: hidden;
  76.   top: 0;
  77.   left: 0;
  78. }
  80. .image-container img {
  81.   display: block;
  82.   position: relative;
  83. }
  85. .image-container a.info {
  86.   text-decoration: none;
  87.   padding: 0;
  88.   text-indent: -9999px;
  89.   width: 20px;
  90.   height: 20px;
  91.   background-color: black !important;
  92.   color: white !important;
  93.   padding: 6px 13px;
  94.   text-align: center !important;
  95. }
  97. .effect .mask {
  98.   opacity: 0;
  99.   overflow: visible;
  100.   box-sizing: border-box;
  101.   // transition: all 0.4s ease-in-out;
  102. }
  104. .effect a.info {
  105.   position: relative;
  106.   top: 0px;
  107.   /* Center the link */
  108.   opacity: 0;
  109.   //  transition: opacity 0.5s 0s ease-in-out;
  110. }
  112. .effect:hover .mask {
  113.   opacity: 1;
  114.   font-size: 13px;
  115.   text-align: center;
  116.   padding: 7px;
  117.   background-color: #86BC25;
  118. }
  120. .effect:hover .mask h3 {
  121.   font-weight: bold;
  122.   font-size: 14px;
  123.   margin: 0px;
  124.   text-align: center;
  125.   //padding: 6px;
  126.   background-color: #86BC25;
  127.   height: 30px;
  128. }
  130. .effect:hover a.info {
  131.   opacity: 1;
  132.   background-color: red;
  133.   color: black;
  134.   //transition-delay: 0.3s;
  135. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;main-four-divs&quot;&gt;
  2.   &lt;div class=&quot;hover-div&quot; style=&quot;width: 650px;
  3.         height: 315px;
  4.         background-color: #FFFFFF; &quot;&gt;
  6.     &lt;div class=&quot;global-mobility-strategy image-container four-divs effect&quot;&gt;
  7.       &lt;div class=&quot;inner-div-content&quot;&gt;
  8.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Global Mobility Strategy&quot; /&gt;
  9.         &lt;h3 style=&quot;line-height: 23px; font-weight: bold;&quot;&gt; Communications &lt;/h3&gt;
  10.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;
  11.         width: 5%;
  12.         margin: -23px 0px -2px 296px;
  13.     &quot;&gt;
  14.       &lt;/div&gt;
  16.       &lt;div class=&quot;mask&quot;&gt;
  17.         &lt;h3&gt;Communications Toolkit&lt;/h3&gt;
  18.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  19.         &lt;/p&gt;
  20.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  21.       &lt;/div&gt;
  22.     &lt;/div&gt;
  24.     &lt;div class=&quot;assignment-policy-reference image-container four-divs effect&quot;&gt;
  25.       &lt;div class=&quot;inner-div-content&quot;&gt;
  26.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Assignment Policy References&quot; /&gt;
  27.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Assignment &lt;/h3&gt;
  28.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;
  29.         width: 5%;
  30.         margin: -10px 0px -2px 296px;
  31.     &quot;&gt;
  32.       &lt;/div&gt;
  33.       &lt;div class=&quot;mask&quot;&gt;
  35.         &lt;h3&gt;Assignment&lt;/h3&gt;
  36.         &lt;p style=&quot;height: 62px;margin: 28px 0px;color:#FFFFFF;font-size:14px;margin-top: -4px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  38.         &lt;/p&gt;
  39.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  40.       &lt;/div&gt;
  41.     &lt;/div&gt;
  42.     &lt;div class=&quot;client-projrct-tools image-container four-divs effect&quot;&gt;
  43.       &lt;div class=&quot;inner-div-content&quot;&gt;
  44.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Client Project Tools&quot; /&gt;
  45.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Client Project&lt;/h3&gt;
  46.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;
  47.         width: 5%;
  48.         margin: -10px 0px -2px 296px;
  49.     &quot;&gt;
  50.       &lt;/div&gt;
  51.       &lt;div class=&quot;mask&quot;&gt;
  52.         &lt;h3 style=&quot;line-height: 35px;&quot;&gt;Client Project &lt;/h3&gt;
  53.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  54.         &lt;/p&gt;
  55.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  56.       &lt;/div&gt;
  57.     &lt;/div&gt;
  58.     &lt;div class=&quot;additional-assignment-references image-container four-divs effect&quot;&gt;
  59.       &lt;div class=&quot;inner-div-content&quot;&gt;
  60.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Additional Assignment References&quot; /&gt;
  61.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Additional Assignment References&lt;/h3&gt;
  62.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;
  63.         width: 5%;
  64.         margin: -10px 0px -2px 296px;
  65.     &quot;&gt;
  66.       &lt;/div&gt;
  67.       &lt;div class=&quot;mask&quot;&gt;
  68.         &lt;h3 style=&quot;line-height: 35px;&quot;&gt;Additional&lt;/h3&gt;
  69.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s .&lt;/p&gt;
  71.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  72.       &lt;/div&gt;
  74.     &lt;/div&gt;
  77.   &lt;/div&gt;
  79. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

您可以通过简单地修改和添加一些CSS来实现这个效果。当鼠标悬停在父元素上时，您可以使用transform: translateX(); CSS来更改覆盖框的位置，并使用nth-child(even) CSS来设置覆盖的负位置。

以下是示例代码：

  1. .four-divs {
  2.     /* 其他样式属性 */
  3. }
  5. /* 其他样式规则 */
  7. .effect:hover .mask {
  8.     opacity: 1;
  9.     font-size: 13px;
  10.     text-align: center;
  11.     padding: 7px;
  12.     background-color: #86BC25;
  13.     transform: translateX(100%);
  14.     z-index: 1;
  15.     margin-left: 3px;
  16. }
  18. .effect:nth-child(even):hover .mask {
  19.     transform: translateX(-100%);
  20.     margin-left: -3px;
  21.     margin-right: 0px;
  22. }
  24. /* 其他样式规则 */

希望对您有所帮助！

英文:

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 -->

  1. .four-divs {
  2.     width: 322px;
  3.     height: 151px;
  4.     background-color: #000000;
  5.     margin-left: 3px;
  6.     margin-bottom: 6px;
  7. }
  8. .four-divs img {
  9.     width: 25%;
  10.     margin-left: auto;
  11.     margin-right: auto;
  12.     display: block;
  13.     padding: 8px 0px;
  14.     margin-bottom: 10px;
  15. }
  16. .global-mobility-strategy {
  17.     float: left;
  18. }
  19. .assignment-policy-reference {
  20.     float: right;
  21. }
  22. .client-projrct-tools {
  23.     float: left;
  24. }
  25. .additional-assignment-references {
  26.     float: right;
  27. }
  28. .mobility-opportunities {
  29.     width: 100%;
  30.     height: 151px;
  31.     background-color: #000000;
  32. }
  33. .four-divs .inner-div-content {
  34.     align-content: center;
  35. }
  36. .inner-div-content h3 {
  37.     color: #FFFFFF;
  38.     display: block;
  39.     margin: 0 auto;
  40.     padding: 0;
  41.     font-size: 16px;
  42.     /* font-family: open sand; */
  43.     text-align: center;
  44.     margin-top: -10px;
  45. }
  46. .mobility-opportunities img {
  47.     width: 13%;
  48.     margin-left: auto;
  49.     margin-right: auto;
  50.     display: block;
  51.     padding: 10px 0px;
  52.     margin-bottom: 20px;
  53. }
  54. .image-container {
  55.     float: left;
  56.     /* overflow: hidden; */
  57.     position: relative;
  58. }
  59. .image-container .mask,
  60. .image-container .content {
  61.     width: 322px;
  62.     height: 151px;
  63.     position: absolute;
  64.     overflow: hidden;
  65.     top: 0;
  66.     left: 0;
  67. }
  68. .image-container img {
  69.     display: block;
  70.     position: relative;
  71. }
  72. .image-container a.info {
  73.     text-decoration: none;
  74.     padding: 0;
  75.     text-indent: -9999px;
  76.     width: 20px;
  77.     height: 20px;
  78.     background-color: black !important;
  79.     color: white !important;
  80.     padding: 6px 13px;
  81.     text-align: center !important;
  82. }
  83. .effect .mask {
  84.     opacity: 0;
  85.     overflow: visible;
  86.     box-sizing: border-box;
  87.     // transition: all 0.4s ease-in-out;
  88. }
  89. .effect a.info {
  90.     position: relative;
  91.     top: 0px;
  92.     /* Center the link */
  93.     opacity: 0;
  94.     //  transition: opacity 0.5s 0s ease-in-out;
  95. }
  96. .effect:hover .mask {
  97.     opacity: 1;
  98.     font-size: 13px;
  99.     text-align: center;
  100.     padding: 7px;
  101.     background-color: #86BC25;
  103.     transform: translateX(100%);
  104.     z-index: 1;
  105.     margin-left: 3px;
  106. }
  107. .effect:nth-child(even):hover .mask {
  108.     transform: translateX(-100%);
  109.     margin-left: -3px;
  110.     margin-right: 0px;
  111. }
  112. .effect:hover .mask h3 {
  113.     font-weight: bold;
  114.     font-size: 14px;
  115.     margin: 0px;
  116.     text-align: center;
  117.     //padding: 6px;
  118.     background-color: #86BC25;
  119.     height: 30px;
  120. }
  121. .effect:hover a.info {
  122.     opacity: 1;
  123.     background-color: red;
  124.     color: black;
  125.     //transition-delay: 0.3s;
  126. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;main-four-divs&quot;&gt;
  2.   &lt;div class=&quot;hover-div&quot; style=&quot;width: 650px; height: 315px; background-color: #FFFFFF;&quot;&gt;
  3.     &lt;div class=&quot;global-mobility-strategy image-container four-divs effect&quot;&gt;
  4.       &lt;div class=&quot;inner-div-content&quot;&gt;
  5.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Global Mobility Strategy&quot; /&gt;
  6.         &lt;h3 style=&quot;line-height: 23px; font-weight: bold;&quot;&gt; Communications &lt;/h3&gt;
  7.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;width: 5%; margin: -23px 0px -2px 296px;&quot;&gt;
  8.       &lt;/div&gt;
  9.       &lt;div class=&quot;mask&quot;&gt;
  10.         &lt;h3&gt;Communications Toolkit&lt;/h3&gt;
  11.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  12.         &lt;/p&gt;
  13.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  14.       &lt;/div&gt;
  15.     &lt;/div&gt;
  16.     &lt;div class=&quot;assignment-policy-reference image-container four-divs effect&quot;&gt;
  17.       &lt;div class=&quot;inner-div-content&quot;&gt;
  18.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Assignment Policy References&quot; /&gt;
  19.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Assignment &lt;/h3&gt;
  20.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;width: 5%; margin: -10px 0px -2px 296px;&quot;&gt;
  21.       &lt;/div&gt;
  22.       &lt;div class=&quot;mask&quot;&gt;
  23.         &lt;h3&gt;Assignment&lt;/h3&gt;
  24.         &lt;p style=&quot;height: 62px;margin: 28px 0px;color:#FFFFFF;font-size:14px;margin-top: -4px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  25.         &lt;/p&gt;
  26.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  27.       &lt;/div&gt;
  28.     &lt;/div&gt;
  29.     &lt;div class=&quot;client-projrct-tools image-container four-divs effect&quot;&gt;
  30.       &lt;div class=&quot;inner-div-content&quot;&gt;
  31.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Client Project Tools&quot; /&gt;
  32.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Client Project&lt;/h3&gt;
  33.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;width: 5%; margin: -10px 0px -2px 296px;&quot;&gt;
  34.       &lt;/div&gt;
  35.       &lt;div class=&quot;mask&quot;&gt;
  36.         &lt;h3 style=&quot;line-height: 35px;&quot;&gt;Client Project &lt;/h3&gt;
  37.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s
  38.         &lt;/p&gt;
  39.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  40.       &lt;/div&gt;
  41.     &lt;/div&gt;
  42.     &lt;div class=&quot;additional-assignment-references image-container four-divs effect&quot;&gt;
  43.       &lt;div class=&quot;inner-div-content&quot;&gt;
  44.         &lt;img src=&quot;icon-22.jpg&quot; alt=&quot;Additional Assignment References&quot; /&gt;
  45.         &lt;h3 style=&quot;line-height: 35px;font-weight: bold;&quot;&gt;Additional Assignment References&lt;/h3&gt;
  46.         &lt;img src=&quot;arrow-new.jpg&quot; alt=&quot;arrow&quot; style=&quot;width: 5%; margin: -10px 0px -2px 296px;&quot;&gt;
  47.       &lt;/div&gt;
  48.       &lt;div class=&quot;mask&quot;&gt;
  49.         &lt;h3 style=&quot;line-height: 35px;&quot;&gt;Additional&lt;/h3&gt;
  50.         &lt;p style=&quot;height: 62px;margin: 10px 0px;color:#FFFFFF;font-size:14px;margin-top: 13px;&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s .&lt;/p&gt;
  51.         &lt;a href=&quot;#&quot; class=&quot;info&quot;&gt;Read more&lt;/a&gt;
  52.       &lt;/div&gt;
  53.     &lt;/div&gt;
  54.   &lt;/div&gt;
  55. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月3日 15:16:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/59574584.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定