The Problem
Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping cart to remain visible even when moving the cursor from one to the other without triggering the disappearance event (onmouseout). Although this behavior seemed odd, it worked well for me so I want to replicate it on my new site.
Note that the information provided above is just a snippet, more detailed instructions are available below once you scroll down :).
ORIGINAL PROTOTYPE CODE
To view the original prototype code on JSFiddle (which unfortunately doesn't work with onmouseover???), click here: https://jsfiddle.net/Please_Reply/k1k566wp/1/. If it doesn't work, you can copy the raw code below into a blank HTML file for testing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
... // More HTML and CSS code
</script>
CURRENT IMPLEMENTATION
If you want to check out the current implementation code on JSFiddle (which also seems to have some issues related to pure JavaScript vs jQuery), here is the link: https://jsfiddle.net/Please_Reply/9uwj2bed/2/.
In the code below, I am looking to have the shoppingCart div appear upon hovering over the shopcartbar div using onmouseover. Additionally, I want the onmouseout functionality to allow hovering onto the shoppingCart div without it disappearing. I aim to achieve similar behavior as seen in my initial prototype.
Another issue arises when applying onmouseover to the small product divs within the shoppingCart container. They unintentionally trigger the onmouseout event, which needs to be corrected.
<head>
<style>
body{
margin:0px;
}
.container{
width:100%;
height:100%;
background-color:white;
font-family:"Myriad Pro";
}
.header{
width:100%;
... // More CSS styles
}
... // More HTML and CSS code
... // Including JavaScript snippets
$(document).ready(function() {
... // JQuery animations and hover event handling
});
</script>