triggering a transition of a element when hovered on another element

Question

i have a div which is box and a 'p' element whose opacity is set to 0. when i hover over the div i want the 'p' elements opacity to change to 1. i have the following code . its looks proper to me but its not working. i could not figure out the problem with it. can some one help me. thanks in advance.

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>

Answer 2

This is actually a kind of annoying problem with just CSS. I'd prefer using Javascript, especially if you already have jQuery loaded into your site.

But, that said, this can sort of be done in CSS. I'm going to assume you just want to show/hide an element, so I'll use display for the example rather than opacity, so modify as needed to use a transition.

The first problem you have is that you box:hover rather than .box.hover. The second problem is a bit more annoying. Abhitalks is correct that +, the adjacent sibling selector, only selects the next sibling, so you can't have the text above the div that will show it. If, however, you switch the order, moving the div above the text, it works. You could use some clever positioning, floating, etc. in order to make the order of their appearance different than their order in the markup, if you wanted.

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