ansaurus

Question

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

Answer 1

A:

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"&gt;   
<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>

merkuro 2009-06-24 03:05:40

This makes it appear next to it, not on top of it. Space is precious

Yegor 2009-06-24 03:10:10

With using display instead of visibility, the complete block will not take any space as long as it is invisible. Additionally the links should now appear below and not next to it. HTH.

merkuro 2009-06-24 03:15:46

The original "item" div needs to hide when "admin_tools" is shown, otherwise it becomes very confusing.

Yegor 2009-06-24 03:19:20

Oh snap. Sorry it's very late over here and I probably shouldn't be on SO to make bad suggestions :) However take a look at this one!

merkuro 2009-06-24 03:23:06

I think the updated version is what you want.Take note that :hover isn't supported in IE on anything other than <a>nchors. So this page won't work, unfortunately.You'll find plenty of information on stuff like this by googling for "Pure CSS menus".

McPherrinM 2009-06-24 03:25:18

I modified your example, and got something that works with in IE and FF.thanks!

Yegor 2009-06-24 03:31:02

@WaffleMatt Good point! I tested it only with IE8/IE7/FF/Opera, but you are right unfortunately this solution fails on <=IE6.

merkuro 2009-06-24 03:32:16

Answer 2

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"&gt;   
<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>

Yegor 2009-06-24 03:31:39

Answer 3

A:

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. :)

Matthew James Taylor 2009-06-25 05:21:29

ansaurus

tags:

views:

answers:

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

related questions