Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h3>Modern Browsers</h3> <p>In modern browsers, you can leverage the <code>:hover</code> pseudo class in our selector. As an example, consider the following markup:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="item"&gt; &lt;p&gt;This is a long string of text&lt;/p&gt; &lt;div class="adminControls"&gt; &lt;a href="#" title="Delete"&gt;Delete Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>By default, we would want the <code>.adminControls</code> to be hidden. They should, however, become visible once the user has hovered the <code>.item</code> element:</p> <pre class="lang-css prettyprint-override"><code>.item .adminControls { display: none; } .item:hover .adminControls { display: block; } </code></pre> <h3>JavaScript and jQuery</h3> <p>If you're using <a href="http://www.jquery.com" rel="nofollow noreferrer">jQuery</a>, you can accomplish this rather easily using the $.hover() method. If you're using Prototype, you can get the <a href="http://code.google.com/p/protohover/" rel="nofollow noreferrer">protoHover plugin</a> to achieve the same result, or view <a href="http://www.zurielbarron.com/2009/01/30/jquery-hover-with-prototype/" rel="nofollow noreferrer">this blog post</a>.</p> <pre class="lang-js prettyprint-override"><code>$("div.item").hover( function () { $(this).find(".adminControls").show(); }, function () { $(this).find(".adminControls").hide(); } ); </code></pre> <p>That would accomplish the show/hide effect for the following:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="item"&gt; &lt;p&gt;This is a long string of text&lt;/p&gt; &lt;div class="adminControls"&gt; &lt;a href="#" title="Delete"&gt;Delete Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;p&gt;This is a long string of text&lt;/p&gt; &lt;div class="adminControls"&gt; &lt;a href="#" title="Delete"&gt;Delete Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;p&gt;This is a long string of text&lt;/p&gt; &lt;div class="adminControls"&gt; &lt;a href="#" title="Delete"&gt;Delete Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POEdit link on div mouseover
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSampson
    1. USSampson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POEdit link on div mouseover
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou'll need the prototype libraries for that to work.
      singulars
      1. PO
      1. USJustin
    2. COWorks fine with just jQuery, as the answer says.
      singulars
      1. PO
      1. USSebastian Paaske Tørholm
    3. COAlso make sure that .adminControls is hidden to start with.
      singulars
      1. PO
      1. USJosh Leitzel
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload