我如何創建一個（多個）彈出文本框，該文本框會在鼠標懸停時顯示，並且如果用戶單擊“ +”號

Question

創建彈出文本框並顯示在HTML頁面中的最簡單/標准方法是什么（如果用戶進行鼠標懸停，並且如果用戶單擊“ +”號也保持可見，而如果用戶單擊“-”則再次關閉） “ 標志。

我需要：

1. 為了在同一HTML頁面上具有多個視覺上獨立的彈出框（包含不同的文本）。

2. 重要的是，在鼠標懸停或單擊展開時，用戶不要在頁面上的任何位置設置滾動或移動。

3. 我還希望在某些彈出窗口中我可以將它們編碼為在用戶首次加載頁面時已經打開。

4. 我正在一個大型的舊網站上工作，我還需要能夠覆蓋鏈接的CSS樣式。

5. 我需要它根據彈出框是否打開來在“更多（+）”和“更多（-）”之間切換。 （也許最好使用圖形而不是我不知道的文本來完成！！）

我正在使用HTML，CSS和Javascript（盡管我不知道我是否真的需要Javascript，也不知道使用和不使用Javascript之間存在什么問題）

到目前為止，這就是我所擁有的：

HTML：

  <p>
  This is my main text about say, Rugby. Blah blah... 
  <a href="javascript:void(0);" onclick="toggleView('contentFees', this)" ><span class="revealLink">More (+)</span></a>
  </p>

  <div id="contentRugby" class="revealInfo" style="display:none;">
 Rugby is a dangerous game played by loonatics etc etc... </div>

CSS：

  .revealInfo { 
     background-color:#f4f4f4;
     padding:10px 25px 15px 25px; 
     Margin: 0px 20px 0px 0px;
  }
  .revealLink{ 
  font-weight:bold; 
  color:#CCC; 
  }
  .revealInfo:hover{display:"";} 

JAVASCRIPT：

  <script type="text/javascript">
  function toggleView(id, link) {
    var e = document.getElementById(id);
    if (e.style.display == '') {
      e.style.display = 'none';
      link.innerHTML = 'More (+)';
    } else {
      e.style.display = '';
      link.innerHTML = 'More (-)';
    }
  }
  </script>

它可以與“更多（）”文本一起在“（+）”和“（-）”之間切換，但是我無法將鼠標懸停在高處。

我究竟做錯了什么？

非常感謝

Ĵ

Answer 1

為什么不下載最新的引導程序http://getbootstrap.com並查看彈出指示。 不要自己發明輪子，而是查看已有的輪子。

Answer 2

您可以使用onmouseover和onmouseout javascript事件。 你試過這個了嗎

<a href="javascript:void(0);" onmouseover="toggleView('contentFees', this)" onmouseout="toggleView('contentFees', this)" onclick="toggleView('contentFees', this)" >

用這個

<p>
        This is my main text about say, Rugby. Blah blah... <a href="javascript:void(0);"
            onclick="toggleView('contentRugby', this, 'click')" onmouseover="showView('contentRugby', this, 'click')"
            onmouseout="hideView('contentRugby', this)"><span class="revealLink">More (+)</span></a>
    </p>

<script type="text/javascript">
        var openedByClick = false;
        function toggleView(id, link, src) {
            var e = document.getElementById(id);
            if (e.style.display == 'none') {
                showView(id, link);
            } else if ((src != 'click' && openedByClick == false) || src == 'click') {
                hideView(id, link);
            }
        }
        function hideView(id, link) {
            var e = document.getElementById(id);
            e.style.display = 'none';
            link.innerHTML = 'More (+)';
        }
        function showView(id, link, src) {
            var e = document.getElementById(id);
            e.style.display = 'block';
            link.innerHTML = 'More (-)';
            if (src == 'click') {
                openedByClick = true;
            }
            else {
                openedByClick = false;
            }
        }
    </script>