悬停不适用于 Javascript、CSS 和 HTML

Question

我是 JS、HTML 和 CSS 开发的新手，我尝试为我的网页开发悬停功能。但是，我面临的问题是，将鼠标悬停在 link 上时没有显示任何内容，并且即使没有悬停，为特定悬停文本框创建的 div 也会出现在页面上。

我使用下面的代码片段来达到这个目的。首先我有一些 CSS（这应该是通用的，所以我可以将它用于不同的悬停 div）。我不确定我是否正确地写了所有内容。其次，我有一个悬停功能的JS代码。然后您会看到我为不同的悬停文本框创建的 div。即使没有悬停，这些 div 也会出现在网页上。我是否需要进一步的 if 语句来表明这些应该只在悬停时显示。最后，我添加了我使用的 link 。也许有人也可以告诉我如何去掉link的蓝色部分，但这目前只是一个小问题。

首先是 CSS 代码：你能告诉我我在这里做的错误吗？我也希望这段代码是通用的。所以每个悬停文本框都应该有这个 "style".

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 触发器中是一个 class .trigger，也许这个是为什么：

the specific hovering textboxes are appearing on the page even if not hovering.

尝试在 CSS

中将 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> 标签的数据属性中获取的 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();

这里是fiddlehttps://jsfiddle.net/pps1sd32/2/

悬停不适用于 Javascript、CSS 和 HTML

Hovering not working with Javascript, CSS and HTML

html

javascript

css

jquery

hover