Css Snippets » hover

Dik onderlijnde navigatie

Mark — Tue, 29 Dec 2009 07:02:01 +0000

Een navigatie kan zoveel vormen aannemen, hier een eenvoudige maar fraaie navigatie met onderlijning bij mouseover.

HTML


	Home
	CSS Codes
	Forums
	Webmaster Tools
	JavaScript
	Gallery

CSS

ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}
ul li{
display: inline;
}
ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}
ul li a:hover, ul li a.selected{
border-bottom-color: black;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Link rollover arrow

Mark — Mon, 02 Nov 2009 08:05:52 +0000

Bij het hoveren over de links, in bijvoorbeeld een navigatie, kun je het visuele effect toevoegen dat er een pijl je muisaanwijzer volgt om aan te geven dat je over de specifieke link aan het hoveren bent. Dit kan eenvoudiger met Javascript gedaan worden, maar een pure CSS oplossing is toch weer dat beetje leuker.

Afbeelding

pointer.gif (176)

HTML

CSS

ul.crawler {
list-style: none;
margin: 1em 0 1em 0;
padding: 0;
float: left;
border: 1px solid #000;
}
ul.crawler li {
position: relative;
float: left;
background: #d2da9c;
z-index: 6;
cursor: pointer;
}
ul.crawler li.x2 {z-index: 5}
ul.crawler li.x3 {z-index: 4}
ul.crawler li.x4 {z-index: 3}
ul.crawler li.x5 {z-index: 2}
ul.crawler li.x6 {z-index: 1}
ul.crawler li a {
float: left;
width: 10px;
height: 25px;
line-height: 25px;
text-decoration: none;
z-index: 2;
position: relative;
cursor: pointer;
background: transparent
}
ul.crawler li a.link {
width: 100px;
position: absolute;
left : 0;
top : 0;
text-align: center;
z-index: 0;
text-decoration: underline;
}
ul.crawler li a: hover span {
position: absolute;
width: 78px;
top : -12px;
left : auto;
margin-left: -30px;
z-index: 3;
background: url(images/pointer.gif) no-repeat left top;
}
a: hover {visibility: visible;background: url(images/transparent.gif)}/* ie needs this*/

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Tooltip met enkel CSS

Mark — Wed, 21 Oct 2009 07:43:55 +0000

Als je het titel (title) attribuut gebruikt in je HTML kan je extra informatie geven aan de bezoeker van je website, maar het nadeel is dat je de tooltip niet kan stylen, maar het kan ook anders, een extra element waarin je al de info over je link kan zetten en ook stylen en enkel toont bij muis over (hover).

HTML

Kom met je muis hier over
	Hier kan je heel veel info in kwijt

CSS

.example1 a {
position:relative;
}
a span {
top:-999em;/* verberg tekst */
position:absolute;
left:-70px;
width:250px;
padding:5px;
background:#829900;
color:#fff;
border:2px solid green;
}
a:hover {
visibility:visible; /* ie bug nodig om de span te tonen*/
}
a:hover span {
top:-66px; /* toon tekst*/
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Foto zoom met CSS

Mark — Wed, 12 Aug 2009 08:32:26 +0000

Kleine thumbnail kan worden bekeken in full-size zonder te moeten klikken, page-refresh, gewoon door te hoveren over de afbeelding.

HTML





Beschrijving:  Hier een omschrijving van je foto.

Photo by some guy

CSS

.PZ3-l {
float:left;
margin-right:10px;
}
.PZ3-r {
float:right;
margin-left:10px;
}
html>/**/body .PZ3-r {
position:relative;
}
.zoom {
border:1px solid #369;
width:210px;
height:137px;
}
.zoom a, .zoom a:visited {
display:block;
padding:0;
overflow:hidden;
text-decoration:none;
height:100%;
width:100%;
}
html>/**/body .PZ3-r a {
right:0;
}
.zoom a:hover {
position:absolute;
z-index:999;
padding:0;
background:none;
cursor:pointer;
height:auto;
width:auto;
overflow:visible;
border:1px solid #369;
margin:-1px 0 0 -1px;
}
html>body .zoom a:hover {
margin:-1px -1px 0 -1px;
}
.zoom a img {
border:0;
height:100%;
width:100%;
}
.zoom a:hover img {
height:auto;
width:auto;
border:0;
}
a:hover .PZ31cap {
display:block;
font:10pt verdana,sans-serif;
margin-top:-3px;
background:#369;
width:276px;
color:#fff;
text-align:left;
}
.PZ3inr {
display:block;
padding:2px 5px;
}
.noCap a:hover .PZ31cap {
display:none;
}
.noBdr,.noBdr a:hover {
border:0;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Eenvoudige CSS tooltip

Mark — Sun, 21 Jun 2009 06:33:26 +0000

Misschien wel de korste manier om met CSS een tooltip te maken (1 regel HTML & 3 regels CSS). Tooltips kunnen zéér handig zijn voor je site, om bijvoorbeeld iets te verduidelijken, als toevoeging op de reeds bestaande browser tooltip.

HTML

Eenvoudige Tooltip
Dit is de eenvoudige tooltip tekst
.

CSS

a:hover {
background:#fff;
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#fff;
border:1px solid #ccc;
color:#6c6c6c;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Eenvoudige CSS dropdown navigatie

Mark — Tue, 09 Jun 2009 07:30:16 +0000

Een menu dat openklapt als je over het bovenliggend navigatie item hovert. Dat is het doel, maar niet altijd eenvoudig te realiseren. Volgende CSS Snippet is een crossbrowser eenvoudig dropdown menu dat met een beetje JavaScript zelf in Internet Explorer 6 werkt.

HTML


Item One

Subitem One
Second Subitem
Numero Tres


Item two

Subitem One
Second Subitem
Numero Tres

CSS

#navbar {
margin: 0;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em;
background-color: #69f;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}

JavaScript

De CSS dient aangepast te worden voor IE6

De class .hover moet nu bij elke :hover worden bijgezet, dus eigenlijk 2 maal hetzelfde schrijven maar nu met een . i.p.v. :

CSS

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Alles:hover, :active, :focus voor IE6

Mark — Sat, 30 May 2009 06:24:41 +0000

De CSS pseudo eigenschap :hover werkt in Internet Explorer alleen op de tag, alle andere browsers laten je toe deze eigenschap toe te passen op alle HTML elementen. Met volgende JavaScript oplossingen kun je Internet Explorer 6 deze eigenschap ook toekennen.
:active en :focus zijn niet bekend voor IE6, dit script lost dit eveneens op.

HTML


  lorem 
  
    adipiscing 
    
      dolor 
     
       consectetuer
    
       elit 
       ipsum 
       Donec 
    
   
    vestibulum 
  
  
  
    consectetuer
   
     elit 
     ipsum 
     Donec 
   
  
   sit amet

CSS

body {
behavior: url("csshover3.htc");
}
ul, li, a {
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
display:block;
margin:0;
padding:0;
}
li {
position:relative;
padding:1px;
font-size: 1.2em;
padding-left:26px;
background:url("images/item_moz.gif") no-repeat;
z-index:9;
display:block;
}
li.folder { background:url("images/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
ul a {
padding:2px;
border:1px solid white;
text-decoration:none;
display:block;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
background:url("images/sub.gif") right no-repeat;
}
ul a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}

Sla volgende complete code op in een bestand met extensie .htc

JavaScript/HTC

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Snelle rollovers zonder preload

Mark — Sun, 08 Mar 2009 21:26:27 +0000

Of je nu CSS of Javascript gebruikt, een achtergrondafbeelding bij een link zal meestal dan pas geladen worden als ze nodig is , bij het hoveren en dit kan soms een vertraging opleveren, en JavaScript preloaden is tegenwoordig geen optie meer.
De oplossing is één afbeelding te gebruiken die alle “states” reeds bevat, en bij hover verander je de afbeelding van plaats, dus geen vertraging meer.

HTML


 link

CSS

#menu a:link, #menu a:visited {
background: url(images/mhu.gif) 0 0 no-repeat;
text-indent: -9000px;
display: block;
height: 110px;
width: 97px;
}
#menu a:hover, #menu a:active {
background-position: 0 -110px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Navigatie met mouseover effecten

Mark — Thu, 05 Mar 2009 21:13:45 +0000

Een crossbrowser navigatie maken is eigenlijk niet zo moeilijk als je maar rekening houd met de verschillen die er zijn. Om de gehele blok te kunnen gebruiken voor de links is de breedte op auto voor de betere browsers, terwijl voor IE6 de breedte op 100% moet worden gezet om alles naar behoren te laten werken.

HTML



CSS3
Nascom
Gigadesign
TopStyle
HTML5
Ultra Edit
Rechts

CSS

#navigatie {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #F93;
color: #333;
}
#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigatie li {
border-bottom: 1px solid #F93;
margin: 0;
}
#navigatie li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #C66300;
border-right: 10px solid #FF870F;
background-color: #EC7600;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigatie li a {
width: auto;
}
#navigatie li a:hover {
border-left: 10px solid #E17100;
border-right: 10px solid #FFB66C;
background-color: #FF962D;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Link hover met achtergrondafbeelding

Mark — Sun, 21 Dec 2008 17:10:35 +0000

Je hebt het al gezien, de links gestyld met afbeeldingen die veranderen als je er met de muis over uit gaat (hover).
Het meerdere deel van deze effecten wordt met JavaScript gerealiseerd, en ook is het (als er veel links zijn) nodig om de afbeeldingen te preloaden.
Deze tutorial leert je een techniek waarbij er geen JavaScript en/of preload aan te pas komt.

Download afbeelding

buttonex.jpg (127)

HTML


link #1
link #2
link #3
link #4
link #5

CSS

#menu a
{
display:block;
width:120px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px sans-serif;
color:#BE670A;
background: url("buttonex.jpg") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover
{
background-position: -157px 0;
/*verschuiving 157px links*/
color: #F28F27;
}
#menu a:active
{
background-position: -314px 0;
/*verschuiving 2x 157px links*/
color:white;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon