悬停不与Javascript, CSS和HTML工作

Hovering not working with Javascript, CSS and HTML

本文关键字：HTML 工作 CSS Javascript 悬停      更新时间：2023-09-26

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

我使用下面的代码片段来达到这个。首先，我有一些CSS(这应该是通用的，所以我可以使用它不同的悬停div)。我不确定我是否写对了。其次，我有一个JS代码的悬停功能。然后你会看到我为不同的悬停文本框创建的div。即使不悬停，这些div也会出现在网页上。我是否需要进一步的if语句来指示这些应该只在悬停时显示。最后，我添加了我使用的链接。也许有人也可以告诉我如何我可以带走链接的蓝色部分，但这目前只是一个小问题。

首先是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?

谢谢你的回答。

丹尼尔

检查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);
  });

在你的CSS中，你有div#trigger，这是一个ID，但在你的JS和HTML触发器是一个类.trigger，也许这就是为什么:

特定的悬停文本框出现在页面上，即使没有盘旋。

尝试更改div#trigger为div.trigger在你的CSS

代码中出错的地方

在这里，您通过从<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/

相关文章：