悬停不适用于Javascript，CSS和HTML

Question

I am new to JS, HTML and CSS development and I tried to develop a hovering function for my webpage. However, I am facing the problem that nothing is being displayed when hovering over the links and the divs created for the specific hovering textboxes are appearing on the page even if not hovering.

I used The code fragments below to reach this. First I have some CSS (this should be generic, so I can use it for different hover divs). I am not sure, if I wrote everything correctly. Secondly, I have a JS code for the hovering function. Then you see the divs I created for the different hover textboxes. These divs appear on the webpage even if not hovering. Do I need further if statements to indicate that these should only be displayed when hovering. Lastly, I added the link I use. Maybe someone could also tell me how I can bring away the blue part of the link, but this is currently only a minor problem.

First the CSS code: Could you tell me the error I am doing here probably? I want this code to be generic as well. So every hover textbox should have this "style".

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

Second, the JS code. Am I doing something wrong in here?

<!-- 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>

And lastly, the divs for the specific hover textboxes. How can I prevent that these divs are being displayed also when the hovering is not active?

<!-- 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>

Links where I call the hover:`

<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?

Thanks a lot for your answers.

Daniel

Answer 1

In your CSS, you have div#trigger which is an ID but in your JS and HTML trigger is a class .trigger , maybe this is why :

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

Try changing div#trigger to div.trigger in your CSS

Answer 2

check this 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

Things which gone wrong in your code

here you show element by its id taken from data attribute of <a> tag

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

but in your dom there is no id attributes that's why your div not showing

 <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> 

If you want to show you div next to pointer than get pointer position and put these positions in your div's style

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

Here the fiddle https://jsfiddle.net/pps1sd32/2/