css - 当悬停在另一个元素上时触发元素的过渡

Question

我有一个 div，它是一个框和一个不透明度设置为 0 的“p”元素。当我将鼠标悬停在 div 上时，我希望“p”元素的不透明度更改为 1。我有以下代码。它看起来很适合我，但它不起作用。我无法弄清楚它的问题。有人能帮我吗。提前致谢。

HTML:

<p class="se">Hover over the div element below</p>
 <div class="box"></div> 

CSS:

.se{
position: relative;
color:red;
opacity:0;
}

.se{
-webkit-transition: opacity 2s;
transition: opacity 2s;
} 
.box{
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;  
}

box:hover + .se{
opacity:0;
}

jsFiddle http://jsfiddle.net/2f1k5yq4/

Answer 1

CSS selector +

Any element that is the next sibling of a previous element (that is: the next child of the same parent)

.box {
  position: relative;
  left: 400px;
  width: 100px;
  height: 100px;
  background: red;
}
.se {
  color: red;
  opacity: 0;
  position: relative;
  transition: 1s linear;
}
.box:hover + .se {
  opacity: 1;
}

<div class="parent">
  <div class="child">
    <div class="box"></div>
    <p class="se">Hover over the div element below</p>
  </div>
</div>