Develop Reference

Allow users to click on elements under a div's blank space?

I had an element which was the top level dom elemnt. I decided to build a user interface over the top, allowing for items to be placed in interface-overlay. It seems I can't click anything inside my interface-overlay, but I can click underlying elements?
Sure, I want to click underlying elements, but I also want to be able to click the overlay, and also click the underlying elements where the overlay doesn't have any dom elements covering it.
I used this, but it seems to block for all space:
pointer-events: none;
If I remove the pointer-event attribute, it flips the issue. I can click the overlay but not the underlying elements.
Code pen showing the issue: https://codepen.io/samhabbo/pen/ExymBBK

One option is to apply pointer-events: none to the parent container but then reset it back to auto on child elements:
.interface-overlay {
/* ... */
pointer-events: none;
}
.interface-overlay > * {
pointer-events: auto;
}
html, body {
margin: 0;
}
.tile {
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
padding: 50px;
}
.interface-overlay {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
padding-left: 20px;
color: #FFFF;
pointer-events: none;
}
.interface-overlay > * {
pointer-events: auto;
}
button.button {
background-color: red;
}
<div class="interface-overlay">
<button class="button">Overlay button</button>
</div>
<div class="tile">
Some tile content.
<button class="button" onclick="alert('test');">Underlying button</button>
</div>

How to make CSS apply to icon within parent container?

I've been trying to make the icon's background (from Material-UI) the same color as the rest of the list items when hovered over.
Not sure why the CSS does not apply to both the icon and text when the overall class (className= "dd-content-item") is being styled. Any help is appreciated thank you!
CSS:
/*This styling applies to each list element in the dropdown-content*/
.dd-content-item {
color: #1D3557;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style-type: none;
cursor: pointer;
justify-content: center;
background-color: none;
}
/*Hovering over a list element in the dropdown menu colors it darkly*/
.delete-icon, .archive-icon{
position: relative;
top: 6px;
}
.favorite-icon, .tag-icon {
position: relative;
top: 7px;
}
.dd-content-item:hover {
background-color: #D3EDEE;
}
/*When you hover over the dropdown-content, it is displayed as a block*/
.dd-wrapper:hover .dd-content {
display: block;
}
Code showing hierarchy in html
Image of hover action

What kind of icon are you using? Is it an image or SVG or what? Chances are your image doesn't have a transparent background.
Otherwise, something like this might help;
.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
background-color: #D3EDEE;
}
Hard to diagnose or say really as I can't see how those images work or what type of object they are.

jQuery hidden element stays hidden when showing with CSS

I have an element which has display:none attribute.
Now if a user hovers the parent, it will be shown:
.item:hover .description {
display: block;
z-index: 1;
}
Now, when I execute
$(".description").hide()
to hide the element again (the user can click an X in the element to close it), the element will not show again if the user is hover the parent again. It stays hidden.
How do I not mess up with the css show and hide functions?

The way you have given your code is you are mixing up CSS and JavaScript. The jQuery uses inline-styles to accomplish the .hide() or show. And inline-styles are more specific than the CSS. Either use classes and toggle them or just use JavaScript.
I would do this way:
.item:hover .description {
display: block;
z-index: 1;
}
.item .description {
display: none;
}
The above is a pure CSS method. But using JavaScript, I would consider using toggleClass() instead of .hide() or .show().
.item:hover .description {
display: block;
z-index: 1;
}
.item .description.hidden {
display: none;
}
And in the JS:
$(".description").addClass("hidden");
And when you want it to be shown, you can always use:
$(".description").removeClass("hidden");
And for toggling things, you can use:
$(".description").toggleClass("hidden");

hide will add an inline style to hide the element, which will override the CSS style in this case.
If you're using JavaScript to hide the element, you'll need to use JavaScript to remove that inline style when no longer relevant. I'd use a mouseleave event handler on .item and a class to hide description:
CSS:
.item:hover .description.hide {
display: none;
}
Hiding description in response to click on X:
$(".item .description").addClass("hide");
Removing that when the user no longer hovers .item:
$(".item").on("mouseleave", function() {
$(this).find(".description.hide").removeClass("hide");
});
Either with direct handlers as above, or with event delegation (I use delegation in the example below).
Live Example:
// Hide when X clicked
$(document.body).on("click", ".item .description .close", function() {
$(this).closest(".description").addClass("hide");
});
// Reset when user no longer hovering
$(document.body).on("mouseleave", ".item", function() {
$(this).find(".description.hide").removeClass("hide");
});
.item .description {
display: none;
}
.item:hover .description {
display: block;
z-index: 1;
}
.item:hover .description.hide {
display: none;
}
/* The following are just for the demo */
.close {
cursor: pointer;
}
.item {
position: relative;
height: 2em;
border: 1px solid black;
}
.item .description {
position: absolute;
background-color: #eee;
left: 10em;
top: 2px;
border: 1px solid #ddd;
}
<div class="item">
I'm item 1
<div class="description">
I'm description 1
<span class="close">[x]</span>
</div>
</div>
<div class="item">
I'm item 2
<div class="description">
I'm description 2
<span class="close">[x]</span>
</div>
</div>
<div class="item">
I'm item 3
<div class="description">
I'm description 3
<span class="close">[x]</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

It's because during hiding this element by JS, you set visibility: hidden to it. After next focus on parent, you won't set visibility: visible which is required.
You can for example execute
$(".description").show()
after next focus on parent element

How do I do the image mouse hover effect?

How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.

You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!

If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.

In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}

How do you make the entire DIV clickable to go to another page?

Do not bind it to javascript "onclick".
It needs to be an anchor.
I know I can bind onclick to the div and make it window.location. However, then...the user cannot open a new tab by CONTROL+Clicking it.
I just want an <a> that fills up the entire div.

Try setting the anchor to display as a block within your DIV and setting its height to 100%, like this:
<style>
a { display: block; height: 100% }
#test { width: 100px; height: 200px; background: red; }
</style>
<div id='test'><a href='#'>...</a></div>
You can see a working example here: http://jsbin.com/ujoca3/2/edit

The semantic way to do it would be to have the anchor act like a div. Because you don't want anything else in the container there's no point in having a container.
<style>
a.fakeDiv, a.fakeDiv:link, a.fakeDiv:hover, a.fakeDiv:active, a.fakeDiv:visited{
display: block;
text-decoration: none;
color: Black;
cursor: default;
outline: none;
}
</style>
<a class="fakeDiv">Content</a>

some html:
<div></div>
some css
yourdiv { position: relative; }
yourdiv a { position:absolute; left:0;right:0;top:0;bottom:0; }

<div>
</div>