Как вы можете изменить div с другим div, onmouseover? - PullRequest
Новая
       3

Как вы можете изменить div с другим div, onmouseover?

0 голосов
/ 24 июня 2009

У меня есть следующий код 

<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 по умолчанию скрыто от просмотра. При наведении курсора мыши на элемент item div его следует заменить содержимым admin_tools .

.

Как бы я поступил так? Предпочтительно ... решение только для CSS.

Макет также не исправлен. Может быть изменено при необходимости.

Ответы [ 3 ]

0 голосов
/ 24 июня 2009 
<?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>
0 голосов
/ 25 июня 2009

Более семантическим подходом может быть использование метода Меркуро, но со списком определений. Таким образом, текст и ссылки связаны друг с другом с некоторым значением. Это также будет хорошо выглядеть при выключенном 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. :)

0 голосов
/ 24 июня 2009

Я изменил пару вещей, но как насчет этого? 

    <?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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...