Fading in and out multiple elements
<p>I have multiple elements I want to fade in and out when a person hovers over a div.
There is a title and the info, when a person hovers over that specific title I want the title to fade out and the info belongs to that title to fade in.</p>

<p>Here is the code:</p>

<pre><code>$(document).ready(function(e) {
    if($(".info").is(":visible")) {
        $(".info").hide();
    }

    $(".title").mouseenter( function() {
        $(this).fadeOut(100);
        $(this).$(".info").fadeIn(100);
    })
    $(".info").mouseleave( function() {
        $(this).fadeOut(100);
        $(this).$(".title").fadeIn(100);
    })

});
</code></pre>

<p>My question is: how do I make the info that belongs to that title to fade in and not all the other infos.</p>

<p>Here is the HTML it has a little of php</p>

<pre><code>&lt;div class="holder"&gt;

            &lt;div class="title"&gt;
                &lt;img alt="random" src="pictures/&lt;?php echo $company['picture']; ?&gt;" height="100" width="100"&gt;
                &lt;p&gt;&lt;a href="profile.php?company=&lt;?php echo $company['id']; ?&gt;"&gt;&lt;?php echo $company['title']; ?&gt;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;

            &lt;div class="info"&gt;
                &lt;p&gt;&lt;a href="profile.php?company=&lt;?php echo $company['id']; ?&gt;"&gt;&lt;?php echo $company['message']; ?&gt;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;

        &lt;/div&gt;
</code></pre>
