We Keep Coding

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.

The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:

The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

Capturing an event through a DOM layer that contains other event listeners

tldr; I want to have a button's event captured (click) even though it's under a DOM layer.
Here's my problem, I have a DOM layer that's relatively positioned and has a z-index set higher than 1, let's just say 2. That DOM layer is above the button (Button A) I'd like to have triggered when clicked. The reason that DOM layer is above the button (Button A) in question, is that the button (ShoreMore) across from it has another event that when clicked, opens a drawer of other little links.
Here's what I've tried:
I tried adding pointer-events: none; to the DOM layer above my button. problem is that while it now allows the button to be pressed, the DOM layer with the button that opens the drawer of other link no longer works. Suggested by this SO question.
I also came across this little trick found on this website. It essentially, hides the mask and rechecks the user's click coordinates and fires the event that is found within the coordinate. However, I found myself unsatisfied with the results, as I'm often given DOM that's unhelpful too specific or too broad based on the user's click. (e.g. getting the icon, text next to the icon, etc. of the Button).
For illustration purposes, here's what I have:
Here's my code:
HTML
<div id="drawer" class="drawer">
<div id="shield" class="shield"></div>
<div id="expander" class="expander">
<div class="inner">
<ul>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
<div id="tab" class="tab" >
<i class="icon"></i> Show More
</div>
</div>
</div>
</div>
<span id="btnA" class="btn">
<i class="icon"></i>
<span>Button A</span>
</span>
CSS
.drawer {
position: relative;
height: 0;
z-index: 2;
margin-bottom: .5em;
}
.expander {
position: relative;
height: 28px;
transition: height .2s ease;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 28px;
}
I didn't include the javascript, but "Button A" and "Show More" have a click listener. They both work, but Button A is confirmed to work if pointer-events: none; is added to the CSS of the class "expander."
EDIT: spelling

One possible solution is to use more absolute positioning.
The problem you're running into is that HTML elements, no matter their shape, end up as rectangles when rendered. Your blue outlined layer has a complex shape that's not strictly rectangular, but HTML doesn't care - it expands the layer's shape into a big rectangle to cover the parent element and all of its children elements, as you've correctly drawn in your diagram.
Absolute positioning helps prevent that from happening. Instead of leaving space for an element in the document flow, absolute positioning sort of pops the element out and positions it relative to its parent. The result is an element that doesn't expand the borders of its parent element, because it essentially takes up zero space in the normal document flow.
Consider the following example:
$(function(){
function slideDown(){
this.innerHTML = "Close";
$("#tray").animate({top: "50px"});
$("#higher-button").off("click").on("click", slideUp);
}
function slideUp(){
this.innerHTML = "Show More";
$("#tray").animate({top: "0px"});
$("#higher-button").off("click").on("click", slideDown);
}
$("#higher-button").on("click", slideDown);
$("#lower-button").on("click", function(){
alert("Lower button clicked.");
});
});
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
}
#box {
position: absolute;
top: 20px;
left: 20px;
}
#lower-button {
width: 200px;
height: 50px;
background-color: #cccccc;
position: absolute;
top: 50px;
}
#higher-button {
width: 200px;
height: 50px;
background-color: #888888;
position: absolute;
top: 50px;
left: 200px;
}
#tray {
width: 400px;
height: 50px;
background-color: #aaaaaa;
position: absolute;
}
#mask {
position: absolute;
width: 400px;
height: 50px;
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="lower-button">Button A</div>
<div id="tray">
<div id="higher-button">Show More</div>
</div>
<div id="mask">Mask</div>
</div>
Absolute positioning lets you easily layer and position elements in a way that avoids them taking up excess space.
The caveat to all this is that absolute positioning can be pretty messy. Since it removes elements from the normal document flow, they don't take up any space, and it can wreak havok with your layouts. So use absolute positioning sparingly, for cases like this where you're building a UI element that you probably don't need taking up space in the layout anyway.
As always there are dozens of ways to solve this problem and this is only one possibility, but I hope it helps you figure out your own solution. Good luck!
Edit: Note you don't necessarily need to make all of the UI elements absolutely positioned, only the ones you need in order to manage the document flow. For example, the parent UI element could still be relatively positioned, and you just "pop out" the individual UI components. You still need to manually manage the size of the parent UI container, because absolutely positioned elements take up zero space in the flow. jsfiddle.net/v2646v41

One easy solution would be to change the z-index of Button A. When the drawer is closed, set it higher than the drawer's div, and when Show More is clicked, set the z-index underneath, then back above after the drawer has slid back under the mask.

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?

Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert

What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

How do I keep a <div> that's underneath a partially transparent .png, scrollable?

I have a div that contains scrollable content and I want to place an overlay on top of that div.
However, the overlay makes everything underneath it unscrollable and unclickable (obviously). Is there a way around that? Some HTML/CSS/JS combination maybe that keeps visible and yet allows the div that is right underneath it to still be scrollable/clickable ?
The reason I'm asking is because I have a div with a background-image (that's my overlay). But the image has a hole in the middle (it's a partially transparent png). So the div that is actually underneath this overlay is visible. So I want to be able to interact with that div.
I know I can write Js to transfer any click/scroll events from one element to another but I have lots of instances of the above setup on a single page, so writing that Js for every single case would be an overkill.
Thank you in advance for your help.
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
#scroller>div {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 50px;
}
#scroller-overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 50px;
}
HTML
<div id="scroller">
<div></div>
</div>
<div id="scroller-overlay"></div>
JSFIDDLE : http://jsfiddle.net/7L8cmeuo/3/

Yes, with CSS in the scroller overlay:
pointer-events: none;
All clicks and other mouse events in the area of the transparent PNG will then fall through to the elements below it. See updated version of your fiddle.

How do website create a Horizontal Bar at Bottom of Page

I have visited some sites where when I scroll half a page, a semi-transparent horizontal column of 100-150px height appears right at the bottom of the page with an image on the left and some message, links on the right.
How can I create it?

Its just a css rule.
#footer {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}

Using Chrome, click CTRL-SHIFT I, then click on the magnifying glass in the bottom left-hand corner to inspect the element. That's the best way to see how they did it on the site you're looking at.
In IE, F12 gives you the Developer Tools, where the arrow selector tool does the same job. In Firefox, use Firebug.
Then just copy their HTML. And Javascript too if necessary.

Use an element with a style similar to following:
#footer {
opacity: 0.7;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: #330000;
}
and then lay things inside it as you wish.