Question

HI

我有5个div。假设（div class =＆＃34; part1＆＃34; class =＆＃34; part2＆＃34; class =＆＃34; part3＆＃34; class =＆＃34; part4＆＃34; class =＆＃34; part5＆＃34;所有都浮动到左边，宽度：20％）所以它们在一行中对齐。

每个div包含2个图像，假设image1的id为＃34; top＆＃34;和image2的id为＃34; bottom＆＃34;（分别在所有div中）。

现在我所做的是，我将所有图像的不透明度设置为id＆＃34; bottom＆＃34;到0并在图像上停留＆＃34;顶部＆＃34;我改变＆＃34;底部＆＃34;不透明度为1和＆＃34;顶部＆＃34;不透明度为0。

它的工作到现在为止。

现在我想要的是 我希望在第1部分div中的第3张图片，其中id为id =＆＃34; yellow＆＃34;

现在当网络加载我想要显示＆＃34; top＆＃34;第1部分中的id图像。

当用户在第1部分上徘徊时id =＆＃34; top＆＃34;想要显示id =＆＃34; bottom＆＃34; image（到现在为止我实现了这个目标）

现在，如果用户在第2部分，第3部分，第4部分，第5部分上悬停，我想显示id =＆＃34;黄色＆＃34;在第1部分。

我尝试使用伪选择器+，〜等但很快我意识到它们只能在div分别位于另一个div或父div之内时才能工作。但在我的情况下，PART1在part2之前就是这样..所以我不能改变顺序。附：我知道它可能与JS jquery，但我不想使用它们。

一些代码

   < div class="part1">
<img1 id="top"></img>  colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
<img3></img>    plain yellow image
</div> 

  < div class="part2">
<img1 id="top"></img> colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
 </div> 
 <div class="part3">
<img1 id="top"></img> colored image with happy child
<img2 id="bottom"></img> yellow image with sad child
</div> 
 < div class="part4">
<img1 id="top"></img> colored image with happy child
 <img2 id="bottom"></img> yellow image with sad child
 </div>  
  < div class="part5">
 <img1 id="top"></img> colored image with happy child
 <img2 id="bottom"></img> yellow image with sad child
  </div>

现在，当我将鼠标悬停在part2-part5上时，我希望在第1部分中显示黄色ID图像即我不想只在part1中显示id顶部和底部的图像，只有id为黄色的图像

Answer 1

这可能有点hacky，可能不适合你的情况，但由于你只有一个黄色部分，你可以使用父母的悬停显示黄色，并在实际悬停part1时覆盖它。 / p>

.yellow {
    background: yellow;
    display: none;
}
.parts:hover .yellow {
    display: block;
}
.parts .part1:hover .yellow {
    display: none;
}

带有半尺寸框的

DEMO。 DEMO有全尺寸的盒子。

Answer 2

UPDATE！

现在，如果将光标从part2直接移回part1，黄色部分将消失。修复使用假透明元素捕获黄色伪元素的悬停。

你需要一个容器元素。

在这里演示：http://codepen.io/abidibo/pen/LEMGQY

HTML代码

<div class="container">
  <div class="part1">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="fake"></div>
  </div>
  <div class="part2">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part3">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part4">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="part5">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

CSS

.container {
  position:relative;
}
.fake {
  z-index: 1001;
  background: transparent;
}
div[class^=part] {
  float: left;
  width:20%;
  height:100px;
  position: relative;
}
div[class^=part] > div, .fake {
  height: 100px;
  width: 100%;
  position: absolute;
}
div[class^=part]:hover .top {
  opacity: 0;
}
div[class^=part]:hover .bottom {
  opacity: 1;
}
.top {
  background: blue;
}
.bottom {
  background: red;
  opacity: 0;
}
.part2:hover:before, .part3:hover:before, .part4:hover:before, .part5:hover:before {
  content: '';
  color: #000;
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100px;
  background: yellow;
  z-index: 1000;
}
.part3:hover:before {
  left: -200%;
}
.part4:hover:before {
  left: -300%;
}
.part5:hover:before {
  left: -400%;
}

最后，只是一个建议。不是一个好习惯，实际上是错误的，在同一个文档中使用相同的id属性，而不是使用类。 IDS应该是唯一的。

如何通过将图像悬停在另一个div中来在一个div中悬停图像？

2 个答案: