将鼠标悬停在元素上时触发元素的过渡

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选择器 +

作为前一个元素的下一个同级元素（即： 同一父母的下一个孩子）

.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>

Answer 2

这实际上是 CSS 的一个烦人的问题。我更喜欢使用Javascript，特别是如果你已经将jQuery加载到你的网站中。

但是，也就是说，这可以在CSS中完成。我假设您只想显示/隐藏一个元素，所以我将使用display而不是opacity，因此根据需要修改以使用过渡。

你

遇到的第一个问题是你box:hover而不是.box.hover。 第二个问题有点烦人。Abhitalks是正确的，相邻的同级选择器+只选择下一个同级，因此您不能在显示它的div上方显示文本。但是，如果您切换顺序，将div 移动到文本上方，它就会起作用。如果需要，您可以使用一些巧妙的定位、浮动等，以使它们的外观顺序与标记中的顺序不同。

.se{
  display: none
}
.box{
  width: 100px;
  height: 100px;
  background: red;  
}
.box:hover + .se{
  display: block;
}

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