title: triggering a transition of a element when hovered on another element
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p class="se"&gt;Hover over the div element below&lt;/p&gt;
   &lt;div class="box"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>jsFiddle <a href="http://jsfiddle.net/2f1k5yq4/" rel="nofollow">http://jsfiddle.net/2f1k5yq4/</a></p>