Demo: command – MoreCSS Documentation

Example 01: Open a print dialogue.

Example 02: Select an input field on mouse over (not in Opera).

Example 03: Trigger a click.

Click me to trigger a click on the other link …

<!-- EXAMPLE 01 -->

<h3>Example 01: Open a print dialogue.</h3>

<p id="print-link"><a>Click here to open a print dialogue …</a></p>
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Select an input field on mouse over (not in Opera).</h3>

<p>
	<input type="text" /><br />
	<input type="text" /><br />
	<input type="text" /><br />
</p>

<!-- EXAMPLE 03 -->

<h3>Example 03: Trigger a click.</h3>

<p><a id="trigger-click" href="#">Click me to trigger a click on the other link …</a></p>
<p><a id="click-link" href="http://yellowgreen.de/">Other Link</a></p>

/* EXAMPLE 01 */

#print-link a:active {
	command: print;
}
 
/* EXAMPLE 02 */

input:hover {
	command: select;
}
 
/* EXAMPLE 03 */
#trigger-click:active => #click-link {
	command: click;
}
 
#click-link:click {
	execute: alert("You clicked the «Other Link». (Note that in some browsers you cannot open a URL by triggering a link because of security reasons.)");
}