StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Big thanks to Mike and Robertc for their helpful posts!</p> <p>If you have two elements in your HTML and you want to <code>:hover</code> over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element. </p> <p>I wanted to display definitions in a box on the right side of the browser as my users read through my site and <code>:hover</code> over highlighted terms; therefore, I did not want the 'definition' element to be displayed inside the 'text' element.</p> <p>I almost gave up and just added javascript to my page, but this is the future dang it! We should not have to put up with back sass from CSS and HTML telling us where we have to place our elements to achieve the effects we want! In the end we compromised.</p> <p><strong>While the actual HTML elements in the file must be either nested or contained in a single element to be valid <code>:hover</code> targets to each other, the css <code>position</code> attribute can be used to display any element where ever you want. I used position:fixed to place the target of my <code>:hover</code> action where I wanted it on the user's screen regardless to its location in the HTML document.</strong></p> <p>The html:</p> <pre><code><div id="explainBox" class="explainBox"> /*Common parent*/ <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/ </a> is as ubiquitous as it is mysterious. /*plain text*/ <div id="definitions"> /*Container for :hover-displayed definitions*/ <p class="def" id="light"> /*example definition entry*/ Light: <br/>Short Answer: The type of energy you see </p> </div> </div> </code></pre> <p>The css:</p> <pre><code>/*read: "when user hovers over #light somewhere inside #explainBox set display to inline-block for #light directly inside of #definitions.*/ #explainBox #light:hover~#definitions>#light { display: inline-block; } .def { display: none; } #definitions { background-color: black; position: fixed; /*position attribute*/ top: 5em; /*position attribute*/ right: 2em; /*position attribute*/ width: 20em; height: 30em; border: 1px solid orange; border-radius: 12px; padding: 10px; } </code></pre> <p>In this example the target of a <code>:hover</code> command from an element within <code>#explainBox</code> must either be <code>#explainBox</code> or also within <code>#explainBox</code>. The position attributes assigned to #definitions force it to appear in the desired location (outside <code>#explainBox</code>) even though it is technically located in an unwanted position within the HTML document.</p> <p>I understand it is considered bad form to use the same <code>#id</code> for more than one HTML element; however, in this case the instances of <code>#light</code> can be described independently due to their respective positions in uniquely <code>#id</code>'d elements. Is there any reason not to repeat the <code>id</code> <code>#light</code> in this case?</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