Tutorial :How do you change a div with another div, onmouseover?



Question:

I have the following code

<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 is hidden from view by default. When a mouse is moved over the item div, it should be replaced with the contents of admin_tools.

How would I go about doing that? Preferably... a CSS only solution.

The layout isnt fixed either. Can be altered if necessary.


Solution:1

I changed a couple of things, but what about something like this?

    <?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>   


Solution:2

<?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>  


Solution:3

A more semantic approach may be to use merkuro's method but with a definition list. This way the text and the links are tied together with some meaning. It will also look good with CSS turned off.

The HTML

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

The 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;  }  

Of course that won't work in old versions of Internet Explorer so you can add some JavaScript to replicate the effect with a 'hover' class:

The 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>  

The 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;  }  

I've used inline JavaScript here for the demo but you should use unobtrusive JavaScript in the final product and only expose it only for IE. :)


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »