Zo kun je door een mouseover bijvoorbeeld de css background-color property wijzigen om de achtergrondkleur van een link of div te veranderen. Of als in je css stylesheet twee styles definieert met verschillende image bestanden als background image, kun je een vergelijkbaar mouseover effect creeren door met onmouseover en onmouseout van background image te veranderen.
Ook kun je op html links een mouseover effect bewerkstelligen door een css stijl voor a:hover te definieren. Hieronder een voorbeeld.
Vaak wordt ook de css visiblity of display property gebruikt om html te laten verschijnen of verdwijnen d.m.v. een mouseover. Hiermee kun je bijvoorbeeld een uitklap mouseover menu maken. Hiervoor maak je gebruik van de javascript getElementById methode.
Van al deze css mousover effecten zie je hieronder voorbeeld.
Mouseover link in CSS
CSS onderscheidt voor de html link vier verschillende fases - te weten:
- a:link { }
- a:hover { }
- a:visited { }
- a:active { }
Gezien de css die je definieert voor a:hover wordt geactiveerd door de html onmousover, kun je zuiver en alleen met css al allerlei interessante mouseover effecten definiëren. In het volgende css mouseover voorbeeld wordt a:hover gebruikt voor een mousover effect:
<html>
<head>
<style type="text/css">
a:link, a:visited, a:active
{
color:#CCCCCC;
font-size:14px;
text-decoration:none;
background-color:#336666;
padding:15px;
}
a:hover
{
color:#FFFFFF;
font-size:14px;
text-decoration:none;
background-color:#cccccc;
padding:15px;
}
</style>
</head>
<body>
<a href="http://joriso.nl"><b>Webdesign!</b></a>
</body>
</html>
Dit voorbeeld levert de volgende link met css mouseover–effect op:
Eenvoudige CSS mouseover button:
In dit css voorbeeld wordt n.a.v. een mouseover de background-color, cursor, border en font color van een div veranderd.
Definieer eerst minstens twee css classes tussen de <head></head> tags van je html pagina:
<style type="text/css">
.nomouse
{
border:2px solid #cccccc;
background-color: #336666;
color: #000000;
width:100px;
font-weight:bold;
}
.mouse
{
cursor:help;
border:2px solid white;
background-color: #99cccc;
color: #ffffff;
width:100px;
font-weight:bold;
}
</style>
Vervolgens kun je tussen de body tags van je html pagina mouseover effecten genereren door een onMousover event te registreren op een html element naar keuze (in dit voorbeeld een <div>).
<div class="nomouse" onmouseover="this.className='mouse'" onmouseout="this.className='nomouse'">Dit is een css mouseover button</div>
Deze CSS gegenereerde 'button' is dan het resultaat:
De volledige html pagina met mouseover ziet er dan zo uit:
<html>
<head>
<style type="text/css">
.nomouse
{
border:2px solid #cccccc;
background-color: #336666;
color: #000000;
width:100px;
font-weight:bold;
}
.mouse
{
cursor:help;
border:2px solid white;
background-color: #99cccc;
color: #ffffff;
width:100px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="nomouse" onmouseover="this.className='mouse'" onmouseout="this.className='nomouse'">Dit is een css mouseover button</div>
</body>
</html>
Visibibility & getElementById - CSS & Javascript mouseover
Met de javascript getElementById methode kun je eigenschappen van html elementen in realtime wijzigen. Met de CSS visibility eigenschap kun je html elementen verbergen en laten verschijnen.
Beweeg je muis over de volgende div:
Met deze css en javascript combinatie kun je bv 'n opmerking laten verschijnen of een navigatie menu bouwen.
Voor dit voorbeeld werd de volgende javascript functies tussen de <head></head>tags gedefinieerd:
<script language="Javascript"><!--
function latenzien(id)
{
document.getElementById(id).style.visibility = 'visible';
}
function verstoppen(id)
{
document.getElementById(id).style.visibility = 'hidden';
}
-->
</script>
Met deze javascript functies wordt (n.a.v. een mousover) een html element geselecteerd en hiervan de visibility eigenschap op hidden danwel visible gezet.
In de head sectie van je html wordt ook in de css style van de div die bij mouseover verschijnt, de visibility eigenschap op hidden ingesteld. Verder definieer je ook de css style voor de (zichtbare) div waarop de mouseover plaats zal vinden:
<style type="text/css">
.mouse2
{
visibility:hidden;
background-color: #336699;
color: white;
width:100px;
font-size:10px;
position:relative;
top:125px;
left:125px;
padding:4px;
border:1px solid white;
}
.nomouse
{
border:2px solid #cccccc;
background-color: #336666;
color: #000000;
width:100px;
font-weight:bold;
}
</style>
Om deze css / javascript mouseover nu ergens te implementeren gebruik je de volgende code tussen de <body></body> tags van je html document. De eerste div is zichtbaar en dient als onmousover onmouseout trigger. De tweede div verschijnt bij mouseover en verdwijnt weer bij mouseout.
<div class="nomouse" onmouseover="latenzien('toverdiv')" onmouseout="verstoppen('toverdiv')">Een CSS & javascript mouseover button</div>
<div id="toverdiv" class="mouse2">Hoi hoe is het?<br>
Met deze css en javascript combinatie kun je bv een opmerking laten verschijnen of een navigatie menu bouwen. </div>
Voor alle duidelijkheid nogmaals de volledige mouseover html pagina met css en javascript inbegrepen:
<html>
<head>
<script language="Javascript"><!--
function latenzien(id)
{
document.getElementById(id).style.visibility = 'visible';
}
function verstoppen(id)
{
document.getElementById(id).style.visibility = 'hidden';
}
-->
</script>
<style type="text/css">
.mouse2
{
visibility:hidden;
background-color: #336699;
color: white;
width:100px;
font-size:10px;
position:relative;
top:125px;
left:125px;
padding:4px;
border:1px solid white;
}
.nomouse
{
border:2px solid #cccccc;
background-color: #336666;
color: #000000;
width:100px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="nomouse" onmouseover="latenzien('toverdiv')" onmouseout="verstoppen('toverdiv')">Een CSS & javascript mouseover button</div>
<div id="toverdiv" class="mouse2">Hoi hoe is het?<br>
Met deze css en javascript combinatie kun je bv een opmerking laten verschijnen of een navigatie menu bouwen. </div>
</body>
</html>
