Question

我有以下代码

<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从视图中隐藏。当鼠标移到项目 div上时，应将其替换为 admin_tools 的内容。

我该怎么做呢？最好......仅限CSS的解决方案。

布局也没有固定。必要时可以更改。

Answer 1

我改变了一些事情，但是这样的事情怎么样？

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

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

Answer 3

更加语义的方法可能是使用merkuro的方法，但使用定义列表。这样，文本和链接就有了一些含义。关闭CSS后它看起来也不错。

HTML

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

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

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

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>

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

我在这里使用内联JavaScript进行演示，但你应该在最终产品中使用不显眼的JavaScript，并且只为IE公开它。：）

你如何用另一个div更改div，onmouseover？

3 个答案: