Javascript 如何将一个div更改为另一个div，onmouseover？_Javascript_Css

Javascript 如何将一个div更改为另一个div，onmouseover？

javascript css

Javascript 如何将一个div更改为另一个div，onmouseover？,javascript,css,Javascript,Css,我有以下代码 <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

我有以下代码

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

文本在此显示
链路1 |链路2 |链路3
这里有文字
链路1 |链路2 |链路3

默认情况下，admin_tools div从视图中隐藏。当鼠标移动到item div上时，应将其替换为admin_tools的内容

我该怎么做呢？更可取地只有CSS的解决方案

布局也不是固定的。如有必要，可以修改

我改变了一些事情，但是像这样的事情呢

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


隐藏/可见
.admin_工具{
显示：无；
}        
.项目：悬停跨度{
显示：无；
}          
.item:hover.admin_工具{
显示：块；
}  
这里有文字
链路1 |链路2 |链路3


隐藏/可见
.外部{
宽度：200px；
}
.admin_工具{
显示：无；
}      
.项目{
位置：相对位置；
}
.item:hover.admin_工具{
显示：内联；
位置：绝对位置；
宽度：200px；
排名：0；
右：0；
背景色：#333；
颜色：#FFF；
}  
这里有文字
链路1 |链路2 |链路3
这里有文字
链路1 |链路2 |链路3
这里有文字
链路1 |链路2 |链路3

更具语义的方法可能是使用merkuro的方法，但要有一个定义列表。通过这种方式，文本和链接以某种意义联系在一起。关闭CSS后也会很好看

HTML文件

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

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

当然，这在旧版本的Internet Explorer中不起作用，因此您可以添加一些JavaScript以使用“hover”类复制效果：

HTML文件

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

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

我在演示中使用了内联JavaScript，但是您应该在最终产品中使用不引人注目的JavaScript，并且只为IE公开它：）

这会使它出现在它旁边，而不是上面。空间是精确的使用显示而不是可见性，整个块只要不可见就不会占用任何空间。此外，链接现在应该显示在下面，而不是旁边。HTH。当显示“管理工具”时，原始的“项目”div需要隐藏，否则它会变得非常混乱。哦，快照。很抱歉，现在已经很晚了，我可能不应该在电视上给你提不好的建议：）不过看看这个吧！我认为最新版本正是你想要的。请注意：IE中除了NCHOR之外不支持悬停。不幸的是，这个页面不起作用。通过谷歌搜索“纯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;
}