Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>A CSS Based Solution</h2> <p>You can achieve a similar effect using CSS only provided that you make a small change to your HTML. </p> <p>Consider the following HTML snippet:</p> <pre><code>&lt;div class="link-wrap"&gt; &lt;div class="link-panel"&gt;Link 1&lt;/div&gt; &lt;div class="link-panel"&gt;Link 2&lt;/div&gt; &lt;div class="link-panel"&gt;Link 3&lt;/div&gt; &lt;div class="link-panel"&gt;Link 4&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The key is to set up a containing block <code>.link-wrap</code> for your <code>.link-panel</code> elements.</p> <p>You then can apply the following CSS.</p> <p>First, you set up the default styles for the case of no hover over the links:</p> <pre class="lang-css prettyprint-override"><code>.link-wrap { background-color: lightgray; overflow: auto; display: inline-block; } .link-panel { width: 100px; line-height: 100px; text-align: center; background-color: blue; color: white; float: left; margin: 10px; /* Optional: To show edges of container block */ } </code></pre> <p>To get the hover effects, you first reset the default style on all the <code>.link-panel</code> elements, and then apply a specific style for the <code>.link-panel:hover</code> element being targeted:</p> <pre class="lang-css prettyprint-override"><code>.link-wrap:hover .link-panel { background-color: yellow; color: black; } .link-wrap .link-panel:hover { background-color: green; color: white; /* Careful about inheritance of colors and other properties */ } </code></pre> <p>In this simple example, when you hover a link, it turns green, and all the remaining ones turn yellow. Note that there is an edge effect when you mouse over the lightgray area, which causes all the links to turn yellow but since you are not exactly on a link, a link is not selected hence no one turns green. However, you can easily work around this by adding an child wrapper within <code>.link-panel</code>, but it all depends on what you are trying to do.</p> <p>You can see a working demo at: <a href="http://jsfiddle.net/audetwebdesign/fGNgz/" rel="nofollow">http://jsfiddle.net/audetwebdesign/fGNgz/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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