Making table data appear on hover (javascript/jQuery or css)
<p>I'm trying to have some span tags (icons) that are each in their own cells of a table element appear when you hover over the entire row</p>

<p><a href="http://i.stack.imgur.com/PPOjF.png" rel="nofollow">Image when not hovering</a></p>

<p><a href="http://i.stack.imgur.com/1p9dK.png" rel="nofollow">Image when hovering</a></p>

<p>I am using CSS for this but am open to using JS as well</p>

<p>HTML</p>

<pre><code>&lt;div class="row1"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="checkbox"&gt;
              &lt;label class="checkbox-inline"&gt;
                &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt;
              &lt;/label&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;img id="preview1" src="images/dummyQueuePreview.png"&gt;&lt;/td&gt;
        &lt;td id="user1"&gt;Emma R.&lt;/td&gt;
        &lt;td id="fileName1"&gt;Ethanol v1.2&lt;/td&gt;
        &lt;td&gt;Physical Science 1&lt;/td&gt;
        &lt;td&gt;12/08/2105 - 13:46&lt;/td&gt;
        &lt;span class="optionTray"&gt;
            &lt;td&gt;&lt;span class="icon-bubble" style="font-size:30px;" id="bubble"&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="icon-stack" style="font-size:30px;"&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="icon-pencil" style="font-size:30px;"&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="icon-bin" style="font-size:30px;"&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="icon-checkbox-checked" style="font-size:30px;"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/span&gt;
    &lt;/tr&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.optionTray{ display: none;}  .row1:hover .optionTray{display : block;}
</code></pre>

<p>It doesn't work</p>