Développer lien div et ajouter des liens en son sein

Ce que j'essaie de faire est, j'ai une boîte de div avec un lien (lien 1). C'est un "href" à l'intérieur d'une div sans titre, donc vous pouvez cliquer sur l'ensemble div. Ce que je veux, c'est que cela se comporte de la façon dont il le fait, mais aussi développe et révèle deux autres liens lorsque vous passez dessus (liens 2 et 3) et que vous vous cachez lorsque vous passez la souris.Développer lien div et ajouter des liens en son sein

http://i.stack.imgur.com/83rV2.png

Le plus proche que j'ai obtenu est ce morceau de code.

Java:

<script type="text/javascript"> 
function showhide(id, visibility) { 
document.getElementById(id).style.display = visibility; 
} 
</script>

CSS:

<div id="button"> <a href='/page' onMouseOver="showhide('divContent','inline');" 
onMouseOut="showhide('divContent','none');" 
onfocus="showhide('divContent','inline')"; 
onBlur="showhide('divContent','none')";></a> <div id="divContent">Link</div> 
</div>

problème est, le divContent div disparaît quand je vais parce que je ne suis pas dans le bouton div plus.

Quelqu'un peut-il aider?

EDIT

Merci Moin Zaman, vous répondez couvre environ 90% de ce que je cherchais. Une chose partielle dont j'ai besoin est que j'ai besoin de clique sur la div originale, en dehors de la zone où apparaissent link1 et link2. La raison en est, le lien 1 est une boîte de div de taille fixe avec une image de fond et pas de texte. L'état hover modifie l'arrière-plan d'une version stationnaire de cette image.

Source

2010-11-08 Matt Coady

Essayez ceci: http://jsbin.com/ohope4/3

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
    html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 } 
    body { font:normal 62.5% arial; margin:20px } 
    #button { background:#808080; padding:25px 10px 5px 10px; width:80px; text-align:center; } 
    #button a { text-transform:uppercase; text-decoration:none; font-size:1.2em; color:#000; } 
    #link2,#link3 {display:none; font-size:0.9em;} 
    #link1 { display:block; text-align:center; padding-bottom:25px } 
    </style> 
</head> 
<body> 

    <div id="button"> 
     <a id="link1" href="#">link 1</a> 
     <a id="link2" href="#">link 2</a> 
     <a id="link3" href="#">link 3</a>   
    </div> 

<script type="text/javascript"> 

    window.onload = function() { 
     var divButton = document.getElementById("button"); 
     divButton.onmouseover = ShowLinks; 
     divButton.onmouseout = HideLinks; 
    }; 

    function ShowLinks(){ 
    document.getElementById('link2').style.display = 'inline'; 
    document.getElementById('link3').style.display = 'inline'; 
    } 
    function HideLinks(){ 
    document.getElementById('link2').style.display = 'none'; 
    document.getElementById('link3').style.display = 'none'; 
    } 
</script> 
</body> 
</html>

Source

2010-11-08 04:40:04

C'est presque exactement ce que je cherche, la seule autre question que j'ai serait, est-il un moyen pour supprimer les mots "lien 1" rendre le div entier cliquable (lié à l'emplacement link1) lorsque vous cliquez n'importe où mais lien 2 et 3. La raison en est, lien 1 est une boîte div divisée taille avec une image de fond et pas de texte . L'état stationnaire passe à une version stationnaire de cette image. –

Vous pouvez simplement associer un événement onclick à la div. Puis-je demander quel est le scénario où vous voulez cette fonctionnalité? Aussi, y a-t-il une raison pour laquelle cela doit être fait avec JS? Il est possible de le faire avec CSS seul. IE6 aura besoin d'un petit hack mais sinon si vous ne vous souciez pas de IE6 ça marchera à peu près partout. Je vais essayer de poster un échantillon bientôt. –

Fondamentalement ma navigation a 5 liens qui coulent dans la moitié gauche de la page. Ces liens sont des boîtes div avec une image d'arrière-plan représentant le lien (pas de texte). Lorsque vous passez la souris sur ceux-ci, l'image d'arrière-plan change verticalement de 100% (comme ceci http://bit.ly/9leUSH). Cela donne l'impression que le lien est brillant lorsque vous le survolez. Un de ces liens de navigation est une catégorie avec deux sous-catégories.Ainsi, dans l'exemple ci-dessus, le lien 1 est la catégorie et le lien 2 et 3 sont les sous-catégories. Je veux que le lien 1 agisse comme il le fait, mais ajoute également quelques options supplémentaires pour accélérer la navigation sur le site. –

Avez-vous essayé d'utiliser jquery? devrait rendre cela beaucoup plus facile. peut-être quelque chose comme:

html:

<div> 
     <a id="link1" href="#">link 1</a> 
     <a id="link2" href="#">link 2</a> 
     <a id="link3" href="#">link 3</a>   
    </div>

javascript:

$("a#linkone").hover(
    // when mouse enters 
    function() { 
     $("a#linketwo").show(); 
     $("a#linkthree").show(); 
    }, 
    // when mouse leaves 
    function() { 
     $("a#linketwo").hide(); 
     $("a#linkthree").hide(); 
    } 
);

Source

2010-11-08 04:10:09

vous n'avez pas besoin de jQuery pour cela. esp. pour quelque chose d'aussi simple que ce –

tout site qui utilise javascript utilisera probablement assez de lui pour justifier facilement l'utilisation de IMHOJQuery IMHO –

Jetez un oeil à cette approche sans JS: http://jsbin.com/osige4

<!doctype html> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 } 
     body { font:normal 62.5% arial; margin:20px } 
     #button { background:#808080; padding:25px 10px 5px 10px; width:80px; text-align:center; cursor:pointer } 
     #button a { text-transform:uppercase; text-decoration:none; font-size:1.2em; color:#000; } 
     #link2,#link3 {display:none; font-size:0.9em;} 
     #link1 { display:block; text-align:center; padding-bottom:25px } 
     #button:hover #link2, #button:hover #link3 { display:inline; } 
    </style> 
    </head> 
    <body> 

    <div id="button"> 
     <a id="link1" href="#">link 1</a> 
     <a id="link2" href="#">link 2</a> 
     <a id="link3" href="#">link 3</a>   
    </div> 

    </body> 
</html>

Source

2010-11-09 06:53:28

: Oh mon Dieu, je pourrais t'embrasser. Avec un petit tweak je l'ai fait pour faire exactement ce dont j'ai besoin. Vous avez sauvé ma santé mentale et ma page est géniale. Merci! –

vous êtes les bienvenus! Pourriez-vous clôturer cette question en acceptant un commentaire en guise de réponse? –

Développer lien div et ajouter des liens en son sein

Répondre

Questions connexes