Как показать / скрыть div при наведении курсора мыши / мыши на TR? - PullRequest
Новая
       8

Как показать / скрыть div при наведении курсора мыши / мыши на TR?

1 голос
/ 12 октября 2009

Можно ли динамически прикрепить всплывающее окно (div) к строке в таблице так, чтобы всплывающее окно отображалось при наведении курсора мыши и скрывалось при действии указателя мыши?

Код, который я собрал (см. Ниже), отказывается отображать всплывающие окна, хотя вызываются обработчики событий.

Возможно ли то, что я пытаюсь сделать? Из [ mouseover () mouseout () jQuery add / removeClass проблема , я предполагаю, что проблема, вероятно, с CSS

Люди мысли?

EDIT: Класс, присоединенный к выбранным элементам div, обновляется, как ожидается, для mouseover и mouseout. 

<link rel="stylesheet" type="text/css" href='mine.css' />
<html>
  <head>    
  </head>
  <body onload="doStuff();">
    <table id="myTable">
        <tr id="r1">
            <td>R1C1</td>
            <td>R1C2</td>
            <td>R1C3</td>
        </tr>
        <tr id="r2">
            <td>R2C1</td>
            <td>R2C2</td>
            <td>R2C3</td>
        </tr>        
        <tr id="r3">
            <td>R3C1</td>
            <td>R3C2</td>
            <td>R3C3</td>            
        </tr>
    </table>
  </body>
  <script type="text/javascript">
      function doStuff(){
          var lRowCount = document.getElementById("myTable").rows.length;

          for(lIter = 0; lIter < lRowCount; lIter += 1){

              var lDynamicColumn = document.createElement("td");

              var lmyDiv = document.createElement( "div" );
              var lId = document.getElementById("myTable").rows[lIter].id;  
              // div content to be displayed as Text content;
              var lText = document.createTextNode( "balderdash!" );

              lmyDiv.id= lId + "_popup";
              lmyDiv.style.display="none" ;              

              lmyDiv.appendChild( lText );

              /*lDynamicColumn.appendChild(lmyDiv);

                document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/

              document.getElementById("myTable").rows[lIter].appendChild(lmyDiv);

              document.getElementById("myTable").rows[lIter].onmouseover = function(){
                  showPopup( lmyDiv.id );
              }
              document.getElementById("myTable").rows[lIter].onmouseout = function(){
                  hidePopup( lmyDiv.id );
              };
          }
          alert(document.getElementById("myTable").innerHTML);
      }

      function showPopup( myId ){          
          document.getElementById(myId).className="show";
      }

      function hidePopup( myId ){
          document.getElementById(myId).className="hide";
      }
  </script>
</html>

mine.css 

.show{
   background-color:                    #ffffc0;
   overflow:                            auto;
   z-index:                             100;
   border:              .1em solid rgb(200, 128, 0);
   float:               right;
   top:                 -10px;
   margin:              5px;
   height:              inherit;
   width:               inherit;
   position:                            absolute;
   white-space:                         no-wrap;
   }

 .hide{
   z-index:         -1;
   }

Ответы [ 6 ]

2 голосов
/ 12 октября 2009

Добавить display: block к .show стилю. Кроме того, ваши селекторы css в этом примере неверны, замените show на .show и hide на .hide (если это не опечатка).

0 голосов
/ 12 октября 2009

Если вы готовы рискнуть несовместимостью браузера (и я имею в виду некоторые довольно старые браузеры, которые мы все хотели бы забыть, но всегда появлялись, когда не должны), вам следует подумать о том, чтобы просто отбросить JavaScript вместе и просто использовать псевдо-код. классы, вот так: 

.trMessage {
   background-color:   #ffffc0;
   overflow:  auto;
   z-index: 100;
   border: .1em solid #c88000;
   float:  right;
   top:  -10px;
   margin: 5px;
   height: inherit;
   width:  inherit;
   position:  absolute;
   white-space: no-wrap;
   display: none;
}

.trMessage:hover {
   display: block;
}

Теперь у вас есть возможность добавить div к каждой строке в текущем html или сохранить javascript, который добавляет окно сообщения, но без необходимости в обработчиках событий настраиваться для переключения стиля или класса. Вы просто создаете блоки, как вы уже делаете, но используете класс "messageBox" для каждого из них. Тогда css берет это оттуда.

0 голосов
/ 12 октября 2009

функция скрыть (объект) { document.getElementById (obj.id) .style.display = 'none'; }

onMouseover = 'hide (this) вызывает эту функцию в div, который вы хотите скрыть.

0 голосов
/ 12 октября 2009

При наведении мыши попробуйте document.getElementById ('yourcontrolID'). Style ['display'] = 'none';

Надеюсь, это сработает.

0 голосов
/ 12 октября 2009

Я не уверен, что это проблема, но возможно, что lmyDiv недоступен внутри встроенной функции. 

document.getElementById("myTable").rows[lIter].onmouseover = function(){
                  showPopup( lmyDiv.id );
              }

EDIT: Я протестировал его, и динамическая настройка стиля стиля, как это, не работала в Firefox , IE , Chrome или Safari . Но это действительно работает в Opera !

РЕДАКТИРОВАТЬ 2:
Я думал о чем-то еще, что могло быть проблемой здесь:

Когда отображается всплывающая подсказка, она расположена так, что мышь находится внутри области подсказки? В этом случае может быть вызвано событие onmouseout в строке, так как рассматриваемая строка больше не имеет «прямого контакта» с мышью ...

Если это так, вы должны добавить: 

  lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover;
  lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;
0 голосов
/ 12 октября 2009

Попробуйте на jQuery !

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...