Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific hovering textboxes appear on the page at all times.
In an attempt to solve this, I have included CSS code for generic styling that should apply to different hover divs. However, I suspect there may be errors. Additionally, I've written JavaScript code for the hovering function and created divs for various hover textboxes. Unfortunately, these divs show up even when not being hovered over. Do I need additional if statements to ensure they only display during hovering? Lastly, I seek guidance on removing the blue formatting from the links, though it's a minor concern for now.
Let's start with the CSS code. Can anyone spot the potential mistake I made in writing this generic style?
div#trigger {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
Next comes the JS code. Any feedback on possible errors here?
<!-- JavaScript 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>
Finally, how can I prevent the specific hover textboxes' divs from showing when 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>
Here are the links triggering the hover effect:
<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?
Your insights and advice are greatly appreciated.
Daniel