悬停不适用于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/