css

Per joan, 18 juliol, 2012

Rollover text with CSS

An easy way to get a rollover text using only CSS (without coding, javascript...). Here you are:

We use two classes (or ID): .rollover for emergent text and .rollover_activador used in text that must activate the rollover.

<span class="rollover_activador">[i]<span class="rollover">Rollover text</span></span>

And, in our .css style file, we use next styles:

.rollover{
  display:none;
}

.rollover_activador{
  position: relative;
}

.rollover_activador:hover .rollover{
  display:inline;
  position: absolute;
  z-index: 10;
  background-color: yellow;
}

Easy, isn't it?

Per joan, 16 juliol, 2012

Com crear un text emergent amb CSS

Una manera senzilla de crear un text emergent, o pop up / rollover, usant només CSS (sense programació, javascript...) és la següent:

Hem d'englobar el text amb dugues classes (o ID). Usarem .rollover pel text a emergir i .rollover_activador pel text que ha de fer saltar el text emergent.

<span class="rollover_activador">[i]<span class="rollover">Text emergent</span></span>

I al nostre fitxer .css usarem els següents estils:

.rollover{
  display:none;
}

.rollover_activador{
  position: relative;
}

.rollover_activador:hover .rollover{
  display:inline;
  position: absolute;
  z-index: 10;
  background-color: yellow;
}

Senzill, oi? després només hem d'acabar de donar-li el look que volguem...

Actualització 20120802: via Linkedin he trobat una manera diferent i, al meu entendre, més simple, de fer-ho:

css
Funciona amb