28172 sujets

CSS et mise en forme, CSS3

2 événements sur un clic

Bonjour
J'essaie désespérément de mettre 2 événements sur un clic
Quand on clique sur une image je voudrais en même temps envoyer sur un lien mais au survol avoir un info bulle style jquery qui apparaisse
Mais là je bloque..
Merci de votre aide
Nadège

<div class="item">
            <div class="carre"><!-- parking-->
	<a href="page_2col.php?id=88&lang=fr" ><img src="images/slide11_83x83.jpg" alt="" /></a>
                     <div class="hover">
                    <span>parking</span> 
	    </div>
              </div>



.item div.wrap {
    background: none repeat scroll 0 0 #E4E4E4;
    border-color: #FFFFFF #FFFFFF #7F7F7F;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    height: 83px;
    padding: 4px;
    position: absolute;
    width: 83px;
}
.item div.carre {
    background: none repeat scroll 0 0 #E4E4E4;
    border-color: #FFFFFF #FFFFFF #7F7F7F;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    height: 83px;
    padding: 4px;
    position: absolute;
    width: 83px;
}

.item div .image {
    display: block;
    height: 83px;
    width: 83px;
}

.item .hover {
    background-image: url("images/slider-hover.png");
    color: #525252;
    display: none;
    font-style: italic;
	font-size:11px;
    height: 123px;
    left: -55px;
    padding: 15px;
    position: absolute;
    text-shadow: 1px 1px 0 #FFFFFF;
    top: -160px;
    width: 182px;
    z-index: 10;
}
.item .hover span {
	color: #A4A4A4;
	float: left;
	font-size: 21px;
	margin: 0 0 10px;
	padding: 0;
	text-transform: uppercase;
}
Bonjour, javascript n'est pas nécessaire pour cet effet, il suffit d'utiliser la pseudo-classe :hover. J'éditerai mon message un peu plus tard pour t'aider (je n'ai pas le temps tout de suite).
Le seul problème, c'est l'accessibilité.

Le teste de ton info bulle est complètement inaccessible (tant aux personnes qu'aux moteurs de recherche).

Pour faire ce genre de choses, JS reste à privilégier.
Ou d'une manière plus simple, peut être comme ça ?

@juliendargelos> Au niveau HTML, ton lien équivaut à "Google est un célèbre moteur de rechercheAller sur Google" (tout collé).
Sujet clos
Aller à