将鼠标悬停在另一个DIV上时显示DIV

Question

我找到了我在寻找SoF的解决方案，但问题仍然存在。我显然没有正确地做某事。也许另外一双眼睛会有所帮助。

基本上，当我将鼠标悬停在一个单独的div上时，我想显示一个隐藏的div。当鼠标悬停在单独的div上时，它会改变bg颜色。

感谢您的帮助。

这是我目前所拥有的CodePen。

HTML

<div class="container-fluid">
  <div class="image">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="one-text">
    <p>Here is some text</p>
  </div>
  <div class="two-text">
    <p>Here is some text</p>
  </div>
  <div class="three-text">
    <p>Here is some text</p>
  </div>
  <div class="four-text">
    <p>Here is some text</p>
  </div>
  <div class="five-text">
    <p>Here is some text</p>
  </div>
</div>

CSS

body {
  background-color: #c5d5cb;
  color: #fff;
  font-family: Open Sans;
  font-weight: 300;
  margin: 0 auto;
}

.container-fluid {
  background-color: #9fa8a3;
  height: 600px;
  padding: 30px;
}
.container-fluid .image {
  background-color: #e3e0cf;
  height: 100%;
  width: 50%;
  float: right;
  padding: 30px;
  display: flex;
  justify-content: space-between;
}
.container-fluid .image .one {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .one:hover {
  background-color: #3b3a36;
}
.container-fluid .image .two {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .two:hover {
  background-color: #3b3a36;
}
.container-fluid .image .three {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .three:hover {
  background-color: #3b3a36;
}
.container-fluid .image .four {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .four:hover {
  background-color: #3b3a36;
}
.container-fluid .image .five {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .five:hover {
  background-color: #3b3a36;
}
.container-fluid .one-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .two-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .three-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .four-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .five-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .one:hover + .one-text {
  display: block;
}
.container-fluid .two:hover + .two-text {
  display: block;
}
.container-fluid .three:hover + .three-text {
  display: block;
}
.container-fluid .four:hover + .four-text {
  display: block;
}
.container-fluid .five:hover + .five-text {
  display: block;
}

Answer 1

好的我已经用JS完成了这个，只是因为它对CSS来说太麻烦了，我也怀疑它在CSS中是否可行。我稍后会发布CSS规则。

我在普通的JS中完成了它，它可以在所有现代浏览器中使用。

首先，我添加了一个轻微过渡到所有内容，而不是在我已完成的段落上显示无：

webkit-transition:.4s;
transition:.4s;
opacity:0;

然后我创建了一个mouseIn和mouse Out函数，有3个参数。

function onEntry(whichDiv,whichText, color) {
whichDiv.style.background = color;
whichText.style.opacity = '1';
}

然后，我必须向所有div添加一个EventListener：

one.addEventListener('mouseover', function(){
onEntry(one, txtOne, "#3b3a36");
}

请参阅第3个参数，您可以更改为所需的颜色。

以下是笔的链接：

http://codepen.io/damianocel/pen/vXQqJE

关于影响悬停时其他元素的CSS规则，它就像：

• 直接在容器内：

container：hover＆gt; #element

• 如果cube位于（容器关闭标记之后）容器旁边：

container：hover + #element

• 如果多维数据集位于容器内的某个位置：

container：hover #cube

干杯

Answer 2

试试吧

#content:hover #hoverbar{
    visibility:visible;
}