Question

我对编码很新，也许你可以帮助我。情况：我正在尝试用css展开div，同时将鼠标悬停在图像上。这些div将出现在图像的左侧或右侧，并包含一些关于它的背景信息。您可以找到here我用作基础的代码。

到目前为止，Everthing正在运行，但是当我在展开的div上运行并且“取消悬停”图像时，只要我用光标停留在div上，div就会可见。我希望它一旦我“移开”图像就会隐形，即使我跑过div曾经存在的地方。我无法想象如何解决我的关于CSS的知识问题。既然英语不是我的母语，也许我忽略了一些东西。我更喜欢仅使用css的解决方案（如果可能的话）。

Here您可以找到代码的jsfiddle版本。

<body>
<section id="imagegrid">
<div class="wrapper">
  <img src="  https://s3.postimg.org/qdqkkehvj/rot.png" />
  <div class="background-info-rechts">
    <div class="text">1</div>
  </div>
</div>
<div class="wrapper">
  <img src="https://s3.postimg.org/4da83rz7j/orange.png" />
  <div class="background-info-links">
    <div class="text">2</div>
  </div>
</div>
<div class="wrapper">
  <img src=" https://s3.postimg.org/fblhlynsv/gr_n.png" />
  <div class="background-info-rechts">
    <div class="text">3</div>
  </div>
</div>
<div class="wrapper">
  <img src="https://s3.postimg.org/fzuc4wmin/blau.png" />
  <div class="background-info-links">
    <div class="text">4</div>
  </div>
</div>
</section>
</body>

的CSS：

/*______________GRID______________*/

#imagegrid {
padding: 0;
list-style: none;
position: relative;
width: auto;
}

.wrapper {
position: relative;
float: left;
width: 25%;
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
height: auto;
}

img {
max-width: 100%;
max-height: auto;
}


/*_________________FOLDOUT EFFECT________________*/

.background-info-rechts {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: pink;
}

.background-info-links {
position: absolute;
right: 100%;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: pink;
}

.background-info-rechts .text,
.background-info-links .text {
padding: 0px;
}

.wrapper:hover .graytocolor {
visibility: visible;
}

.wrapper:hover .background-info-rechts,
.wrapper:hover .background-info-links {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,-moz-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
visibility: visible;
opacity: 1;
z-index: 1;
}

Answer 1

这是因为background-info * div是包装器div的一部分。尝试将此添加到您的CSS：

.wrapper .background-info-rechts:hover,
.wrapper .background-info-links:hover {
    visibility: hidden;
}

使用鼠标悬停在图像上时显示的div，即使在用光标运行它们时也是不可见的

1 个答案: