Question

我在html中创建了一个包含标题，背景图片和顶部的幽灵div的框，它在悬停时显示链接。

html看起来像这样：

<div class = "box-wrapper">
  <div class = "ghost-box">
    <a class = "link-button"></a>
  </div>
  <div class = "content-box">
    <h3 class = "title">Title</h3>
  </div>
</div>

CSS看起来像这样：

.box-wrapper {display:inline-block;}
.ghost-box {
  position:absolute;
  width: 300px;
  height: 100%;
  background-color: rgba(1, 81, 161, 0.9);
  opacity: 0;
  transition: all .3s ease;
}
.ghost-box:hover {opacity:1;}
.content-box {
  width: 300px;
  height: 180px;
  background-image:url('example.jpg');
}
.title {
  opacity:1;
  transition: all .3s ease;
}

我的难题是，幽灵div上的悬停过渡效果很好，但我也想影响＆＃34;标题＆＃34;元素也是。我不想减少＆＃34;内容框＆＃34;的不透明度。因为我希望背景图像仍然通过鬼格显示，但是我希望标题将它的不透明度改为0.我已经尝试了几种组合：

.content-box:hover:first-child {opacity:0;}

为：

.box-wrapper:hover:last-child {opcaity:0;}

但似乎没有任何效果。有什么建议？我希望我做得足够清楚。

Answer 1

如果将悬停移动到容器元素，则可以执行此操作。

.box-wrapper:hover .ghost-box {
  opacity: 1
}
.box-wrapper:hover .title {
  opacity: 0
}

或者你可以使用CSS通用兄弟选择器。 https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Answer 2

选项1：在def pred(self, key): temp = self.root prev = None if (temp.left is not None): temp = temp.left while (temp.right is not None): temp = temp.right prev = temp elif temp.right is not None: temp = temp.right while (temp.left is not None): temp = temp.left prev = temp else: return None return prev.key上设置背景图像选项2：使用.box-wrapper.为.content-box的内容设置不透明度选项2：使用您应用淡入淡出效果的另一个div（.content-box>*？）包装.content-box的内容。

悬停并更改div和元素的不透明度

2 个答案: