Home/ Questions/Q 250575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T21:31:21+00:00

I have the following code <div class=item id=item1>Text Goes Here</div> <div class=admin_tools id=tools1>Link 1

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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