懸停不適用於Javascript，CSS和HTML

Question

我是JS，HTML和CSS開發的新手，因此嘗試為我的網頁開發一個懸停功能。 但是，我面臨的問題是，將鼠標懸停在鏈接上時，什么都不會顯示，即使沒有懸停，為特定懸停文本框創建的div也會顯示在頁面上。

我使用下面的代碼片段來達到此目的。 首先，我有一些CSS（應該是通用的，因此可以將其用於不同的懸停div）。 我不確定我是否正確編寫了所有內容。 其次，我有一個用於懸停功能的JS代碼。 然后，您會看到我為不同的懸停文本框創建的div。 即使沒有懸停，這些div也會顯示在網頁上。 我是否需要進一步的if語句來指示僅在懸停時才顯示這些語句。 最后，我添加了我使用的鏈接。 也許有人也可以告訴我如何取消鏈接的藍色部分，但這目前只是一個小問題。

首先是CSS代碼：您能告訴我我在這里可能發生的錯誤嗎？ 我也希望此代碼也通用。 因此，每個懸停文本框都應具有此“樣式”。

div#trigger {
    display: none;
    position: absolute;
    width: 280px;
    padding: 10px;
    background: #eeeeee;
    color: #000000;
    border: 1px solid #1a1a1a;
    font-size: 90%;
  }

第二，JS代碼。 我在這里做錯什么了嗎？

<!-- Java Script for Hovering -->
<script>
  $(".trigger").hover(function(e) {
      var elemToShow = $(this).data("target");
      $("#" + elemToShow).show();
  }, function() {
      var elemToShow = $(this).data("target");
      $("#" + elemToShow).show();
  }).mousemove(function(e) {
      var elemToShow = $(this).data("target");
      $("#" + elemToShow).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
</script>

最后，特定懸停文本框的div。 當懸停未激活時，如何防止顯示這些div？

<!-- Purpose: Hover Popup -->
  <div class="trigger" target "purpose">
    <h3>Purpose</h3>
    <p>
      Test
    </p>
  </div>

   <!-- Scope: Hover Popup -->
  <div class="trigger" target "scope">
    <h3>Scope</h3>
    <p>
      dfsdf
    </p>
  </div>

我稱之為懸停的鏈接：

<a class="trigger" data-target="purpose"> Purpose:</a> Why do we want to innovate?

<a class="trigger" data-target="scope"> Scope:</a> Who are we innovating for?

非常感謝你的回答。

丹尼爾

Answer 1

在CSS中，您有div#trigger這是一個ID，但是在您的JS和HTML觸發器中是一個類.trigger ，也許這是為什么：

即使沒有懸停，頁面上仍會顯示特定的懸停文本框。

嘗試在CSS div.trigger div#trigger更改為div.trigger

Answer 2

檢查這個https://jsfiddle.net/pps1sd32/

 $(".trigger").hover(function(e) {        
      var elemToShow = $(this).attr("data-target");          
      $("#" + elemToShow).show();
  }, function() {
      var elemToShow = $(this).attr("data-target");
      $("#" + elemToShow).hide();
  }).mousemove(function(e) {
      var elemToShow = $(this).data("data-target");
      //$("#" + elemToShow).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

Answer 3

您的代碼出了點問題

在這里，您通過從<a>標簽的data屬性獲取的id顯示元素

 $("#" + elemToShow).show(); 

但是在您的dom中沒有id屬性，這就是為什么您的div不顯示

 <div class="trigger" target "purpose"> // Id is missing here to make this div visible 
    <h3>Purpose</h3>
    <p>
      Test
    </p>
  </div>

   <!-- Scope: Hover Popup -->
  <div class="trigger" target "scope">// Id is missing here to make this div visible 
    <h3>Scope</h3>
    <p>
      dfsdf
    </p>
  </div> 

如果要在指針旁邊顯示div而不是獲取指針位置並將這些位置設置為div的樣式

 var left  = e.clientX  + "px";
         var top  = e.clientY  + "px";
      $("#" + elemToShow).show().css({position:'absolute',top:top,left:left}).show();

這里的小提琴https://jsfiddle.net/pps1sd32/2/