How to make one div fade in and the other fade out on hover?
<p>Needless to say, I'm a beginner, especially when it comes to JavaScript and jQuery. I'm looking for a way to make one div fade in (via visibility, not opacity) and one fade out.</p>

<p>Here's an example of the HTML I'm going for.</p>

<pre><code>&lt;div class="container"&gt;
 &lt;div class="secondary" style="height:100px;width:100px;display:none;"&gt;
  When you hover over .main, .secondary fades in and .main fades out
 &lt;/div&gt;
 &lt;div class="main" style="height:100px;width:100px;"&gt;
  This text is visible by default
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I've looked around and couldn't find quite what I was looking for.</p>

<p>Thank you so much in advance.</p>
