Comment changer un div avec un autre div, onmouseover?

J'ai le code suivantComment changer un div avec un autre div, onmouseover?

<div class="item" id="item1">Text Goes Here</div> 
<div class="admin_tools" id="tools1">Link 1 | Link 2 | Link 3</div> 

<div class="item" id="item2">Text Goes Here</div> 
<div class="admin_tools" id="tools2">Link 1 | Link 2 | Link 3</div>

Admin_Tools div est cachée par défaut. Lorsqu'une souris est déplacée sur le élément div, il doit être remplacé par le contenu de admin_tools.

Comment est-ce que je ferais cela? De préférence ... une solution uniquement CSS.

La mise en page n'est pas non plus corrigée. Peut être modifié si nécessaire.

Source

2009-06-24 Anonymous

J'ai changé un certain nombre de choses, mais qu'en est-il de quelque chose comme ça?

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Hidden/Visible</title> 
    <style type="text/css"> 
     .admin_tools{   
     display:none; 
     }   
     .item:hover span{ 
     display:none; 
     }   
     .item:hover .admin_tools{ 
     display:block; 
     } 
    </style> 
    <body> 
    <div class="item" id="item1"> 
     <span>Text Goes Here</span> 
     <span class="admin_tools" id="tools1">Link 1 | Link 2 | Link 3</span> 
    </div>  
    </body> 
</html>

Source

2009-06-24 03:05:40 merkuro

Cela le fait apparaître à côté de lui, pas au-dessus de celui-ci. L'espace est précieux –

En utilisant l'affichage au lieu de la visibilité, le bloc complet ne prendra pas d'espace tant qu'il est invisible. De plus, les liens devraient maintenant apparaître ci-dessous et non à côté. HTH. – merkuro

La div "item" d'origine doit être masquée lorsque "admin_tools" est affiché, sinon cela devient très confus. –

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>    
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Hidden/Visible</title> 
    <style type="text/css"> 

    .outer { 
     width:200px; 
    } 
     .admin_tools{   
     display:none; 

     }  
     .item { 
      position:relative; 
     } 

     .item:hover .admin_tools{ 
     display:inline; 
     position:absolute; 
     width:200px; 
     top:0; 
     right:0; 

     background-color:#333; 
     color:#FFF; 
     } 
    </style> 
    <body> 
    <div class="outer"> 
    <div class="item" id="item1"> 
     <span>Text Goes Here</span> 
     <span class="admin_tools" id="tools1">Link 1 | Link 2 | Link 3</span> 
    </div>  
    <div class="item" id="item2"> 
     <span>Text Goes Here</span> 
     <span class="admin_tools" id="tools2">Link 1 | Link 2 | Link 3</span> 
    </div> 
    <div class="item" id="item3"> 
     <span>Text Goes Here</span> 
     <span class="admin_tools" id="tools3">Link 1 | Link 2 | Link 3</span> 
    </div>  
    </div> 
    </body> 
</html>

Source

2009-06-24 03:31:39

Une approche plus sémantique peut être d'utiliser la méthode de merkuro mais avec une liste de définitions. De cette façon, le texte et les liens sont liés ensemble avec un sens. Il sera également bien avec CSS désactivé.

Le code HTML

<dl class="tool"> 
    <dt>Test goes here</td> 
    <dd>Link 1 | Link 2 | Link 3</dd> 
</dl>

Le CSS

dl.tool, 
dl.tool dt { 
    margin:0; 
    padding:0; 
} 
dl.tool dd { 
    margin:0; 
    padding:0; 
    display:none; 
} 
dl.tool:hover dt { 
    display:none; 
} 
dl.tool:hover dd { 
    display:block; 
}

Bien sûr, qui ne fonctionnera pas dans les anciennes versions d'Internet Explorer afin que vous pouvez ajouter un peu de JavaScript afin de reproduire l'effet avec une classe 'hover':

Le HTML

<dl class="tool" onmouseover="this.className='tool hover'" onmouseout="this.className='tool'"> 
    <dt>Test goes here</td> 
    <dd>Link 1 | Link 2 | Link 3</dd> 
</dl>

Le CSS

dl.tool, 
dl.tool dt { 
    margin:0; 
    padding:0; 
} 
dl.tool dd { 
    margin:0; 
    padding:0; 
    display:none; 
} 
dl.tool:hover dt, 
dl.tool.hover dt { 
    display:none; 
} 
dl.tool:hover dd, 
dl.tool.hover dd { 
    display:block; 
}

J'ai utilisé JavaScript en ligne ici pour la démo, mais vous devez utiliser JavaScript discret dans le produit final et d'exposer seulement seulement pour IE. :)

Source

2009-06-25 05:21:29

Comment changer un div avec un autre div, onmouseover?

Répondre

Questions connexes