Develop Reference

Hover over another div on a image will interrupt my onmouseenter

https://github.com/UneSaltedFish/landingpage.git (github link to view full html/css/js)
Here I am developing a landing page, and On the right bar vector picture, I used a hover effect(When I enter this pic, It will change to another picture and there will have two clickable text on it.)
<div class="rightCon">
<img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
and it is looks like this.
img
Here is the css code:
a{
color:black;
text-decoration: none;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:150px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.text{
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 30px;
}
and the js code
function right2(){
document.getElementById("right").src = "right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
The problem is the onmouseenter is work when go in to right area, but when I go in to right1 and right 2 area, onmouseleave is work, which I don't want to. I want this hover only work when enter right and leave right.
After I search online, I try to make div as a child of img but I don't know How to make children of a img.And I am stuck here.
Thank you in advance for all help.

If you want the events to be on the image and the other siblings, you should put the event listeners on their parent. Now anywhere you hover in the parent, the mouse will remain.
<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
<img o src="right.png" alt="right" class="right" id = "right">
...
Other option just pure css
.rightCon .details {
display: none;
}
.rightCon:hover .default {
display: none;
}
.rightCon:hover .details {
display: block;
}
<div class="rightCon">
<img class="default" src="http://placekitten.com/g/400/200">
<img class="details" src="http://placekitten.com/400/200">
<div class="default">FOOOOOO</div>
<div class="details">Meow</div>
</div>

Hiding a popup using javascript

I have a page which has multiple CSS only pop-ups implemented.
The popups work fine & close when the 'X' is clicked. However I wish for them to be closed when user clicks anywhere on the page. For that I implemented a short javascript code, which does close them on any click, but they dont open again (until page is refreshed). I am guessing the state is being saved as "none". How do i fix this?
The code:
window.onclick = function(event) {
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
}
<div class="editbutton">
<a class="btn btn-link" href="#popupedit">Edit</a></div>
<div id="popupedit" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
<div class="editbutton">
<a class="btn btn-link" href="#popupedit1">Edit</a></div>
<div id="popupedit1" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
<div class="editbutton">
<a class="btn btn-link" href="#popupedit2">Edit</a></div>
<div id="popupedit2" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>
The CSS code:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2000;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup10 {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
position: relative;
transition: all 5s ease-in-out;
}
.popup10 h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup10 .close {
position: absolute;
top: 8px;
right: 10px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup10 .close:hover {
color: #06D85F;
}
.popup10 .content {
max-height: 30%;
overflow: auto;
}

Here is the code you should update in javascript.
window.onclick = function(event) {
if (event.target.className === "btn btn-link") {
document.getElementById('popupedit').style.display = "block";
}
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
}
Why the popup is not opened again is that you set the overlay part display: none when clicking the part, but no process to set back to display: block.
So you should set the popup layout back to display: block again when clicking the edit button.
Please see the result working : https://jsfiddle.net/254xmyv7/3/
Hope this would be helpful. :)

Although #Kevin Lee's code works, adding a long list of elements with getElementById isn't recommended. If you remove one of the popup elements or add one, you have to go back and manually change the code. You should consider instead looping through all the existing elements with the class 'overlay' and applying the property with a single line of code rather than 10 separate ones:
window.onclick = function(event) {
var popups;
if (event.target.className === "btn btn-link") {
popups = document.getElementsByClassName('overlay');
console.log(popups[i]);
for (let i = 0; i < popups.length; i++) {
popups[i].style.display = "block";
}
}
if (event.target.className === "overlay") {
event.target.style.display = "none";
}
};
This will save you a lot of time and potentially aggravation down the road. Working fiddle here: https://jsfiddle.net/Vanadu/u7n30Lra/24/

In your javascript, the window element gets the click, finds the element with the class 'overlay' and sets its style.display property to 'none'. Then, when you click the element to open the popup, that click is 'bubbling up' the DOM tree to the window, and the window then sets the display property to 'none' again before the popup can open.
One approach might be to prevent the click on the elements from 'bubbling up' and use the same class on the window level to control the popup that you use on the element level.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

How do I set the active state for image buttons instead of just focused state with my current code?

First time posting here and new to programming with just 3 days of experience.
I'm having some trouble getting my default button to be active instead of just focused. I've attempted to read other posts about this, but my lack of experience makes it hard for me to put 2 and 2 together.
The page is going into squarespace so I'm trying to do it all in one code block. I don't want the buttons to deactivate when the user clicks on other parts of the website, which it currently happens. (Even if they click on blank areas).
Thank you very much for any advice you can give me.
/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width: 210px;
height: 135px;
padding: 0px;
border: 0px;
outline: 0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat;
/* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
.services:focus,
.services:hover,
.services:active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
.assets:focus,
.assets:hover,
.assets:active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
.viz:focus,
.viz:hover,
.viz:active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
.software:focus,
.software:hover,
.software:active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
.more:focus,
.more:hover,
.more:active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets,
#viz,
#software,
#more {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software">
<divtext>INTERACTIVE SOFTWARE</divtext>
</a>
<a href="javascript:void(0)" onclick="show('assets');" class="services assets">
<divtext>3D ASSET CREATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('viz');" class="services viz">
<divtext>3D VISUALIZATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('more');" class="services more">
<divtext>IMAGE CREATION</divtext>
</a>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload = function() {
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>

Welcome to Stack Overflow.
So first thing to note, the :active pseudo element only applies when the user clicks (mouse-down) on something. You can see it here
The most common method is to apply the css class "active", and have a .active selector on whatever element you want to style.
Right now you have the buttons affected by hover and focus, so when the user clicks outside the button it loses focus.
You can solve this by changing a bit of CSS and javascript. The edited portions are marked by /* EDIT */
I would not recommend the last line where I exploit the fact that your function passes in the element ID, and that element ID matches the class of the button that was used to select it. A better way would to have show take the Javascript event as argument, then use the event.target to get the a tag clicked on, then use a getElementById on something like a data-target="more" attribute. This will allow you to change the CSS class without coupling the class to the implementation of the Javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width:210px;
height:135px;
padding: 0px;
border:0px;
outline:0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
/* EDIT */
.services:focus, .services:hover, .services.active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
/* EDIT */
.assets:focus, .assets:hover, .assets.active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
/* EDIT */
.viz:focus, .viz:hover, .viz.active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
/* EDIT */
.software:focus, .software:hover, .software.active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
/* EDIT */
.more:focus, .more:hover, .more.active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets, #viz, #software, #more {
display: none;
}
</style>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<divtext>INTERACTIVE SOFTWARE</divtext>
<divtext>3D ASSET CREATION</divtext>
<divtext>3D VISUALIZATION</divtext>
<divtext>IMAGE CREATION</divtext>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
/* EDIT */
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
// get a list of the buttons with ".services" class
const buttons = document.querySelectorAll(".services");
for(let button of buttons) {
// remove ".active" class
button.classList.remove("active");
}
// add the active class to element button specified by argument
document.querySelector("." + elementId).classList.add("active");
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload=function(){
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>

On button click display list items, dropdown list should not hide until button is clicked again

I have looked everywhere possible as I am trying to develop a drop down button, but instead of options then the buttons display unordered list items, but when a user click off the button the the button does not close, but in order to close the button, then the button needs to be click again.
Down below you will find the way the button is when not clicked and the way the button appears when it has been clicked.
If you also go to the following website you will see an example of the button in action by click "See our list of websites"
Button on a website for example
Any help would be greatly appreciated and thanks in advance.

Here you go, key functions I used;
.click() for the a tag or the link, the function inside the .click() will be called.
.slideToggle() the ul after the click, this would hide or show the target element depending on its state.
Then add positon:absolute to the ul so that it wouldn't affect inline elements.
$(document).ready(function() {
$(".toggle-button").click(function() {
$(this).parent().find("ul").slideToggle(function() {
// Animation complete.
});
});
})
.links-unordered {
display: inline-block;
position: relative;
}
.links-unordered {
margin-top: 20px;
min-height: 30px;
}
.links-unordered .toggle-button {
text-decoration: none;
padding: 12px 16px 12px 16px;
transition: 0.2s;
border: 1px solid black;
}
.links-unordered .toggle-button:hover,
.links-unordered .toggle-button:active,
.links-unordered .toggle-button:focus,
.links-unordered .toggle-button:visited {
text-decoration: none;
color: black;
}
.links-unordered .toggle-button:hover {
border-width: 2px;
}
.links-unordered ul {
position: absolute;
top: 10px;
margin-top: 25px;
padding-inline-start: 20px;
}
.links-unordered ul li {
line-height: 25px;
padding-left: 15px;
}
.links-unordered a {
text-decoration: none;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links-unordered">
<a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
<ul style="display:none;">
<li>cdn.sc.rockstargames.com</li>
<li>lifeinvader.com</li>
<li>rockstargames.com</li>
<li>socialclub.rockstargames.com</li>
</ul>
</div>
<div class="links-unordered">
<a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
<ul style="display:none;">
<li>cdn.sc.rockstargames.com</li>
<li>lifeinvader.com</li>
<li>rockstargames.com</li>
<li>socialclub.rockstargames.com</li>
</ul>
</div>

I'm not sure if I understand what you want. But here's a sample of what you asked, a button that when you click, show a list. And when you click on an item, the list goes out and you have the item. Hope this helps you. It's a simple code, but if you have questions, go ahead and ask!!
function closeList(e) {
var site = e.target.innerText;
alert(site + ' clicked!!');
document.querySelector('#dvSites').style.display = 'none';
}
function showList() {
var dvSites = document.querySelector('#dvSites');
if (dvSites.style.display === '')
return; // already visible
dvSites.style.display = '';
}
// Add eventListener to close the div
var lis = document.querySelector('#dvSites').querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', closeList);
}
// Add eventListener to open the div
document.querySelector('#btnShow').addEventListener('click', showList);
<button id="btnShow">Show sites!!</button>
<div id="dvSites" style="display: none">
<ul>
<li>stackoverflow.com</li>
<li>www.google.com</li>
<li>www.sipmann.com</li> <!-- :) -->
</ul>
</div>

how to hide back a hidden div which was shown after jquery click function

Guys I was trying to make a notification menu which dropdown on click event.I have make that with below code but I have a problem that I can't hide it back.I want to hide it by clicking on body and div itself.How can I do that?
My html part.
<li class="clicker" >
<a>Notification</a>
<div class="display_noti">
<ol>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
</ol>
</div>
</li>
My css part
.display_noti
{
width: 400px;
height: fixed;
display:none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
My jquery part.
$('.clicker').on('click',function(){
if($('.display_noti').css("display","none")){
$('.display_noti').show();
}
});
I am trying with this jquery code too but when I keep this code show() function doesn't work.
$('body').on('click',function(){
$('.display_noti').css("display","none");
});

just make your js code as:
$('.clicker').on('click',function(){
$('.display_noti').toggle();
});
http://jsfiddle.net/jp42q7t8/5/
Update:
also, if you want you may consider change the cursor shape on the li element to show that it is clickable like this:
.clicker { cursor:pointer; }
Update2:
If you add this somehow you can make the <div class="display_noti"> disappear when you click on it i don't know why though but it fixes it:
$('.display_noti').on('click',function(){
$(this).css({'background':'black'}); //same background color of the inner div
});

// hide some divs when click on window
var actionwindowclick = function(e){
if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
&& $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
{
$(".display_noti").hide();
}
}
$(window).on('click',function(e){
actionwindowclick (e);
});
$('.clicker').on('click',function(){
$(".display_noti").slideToggle();
});
Jsfiddle

$(document).click(function(e) {
$('.display_noti').hide();
});
$('.clicker').on('click', function(e) {
$('.display_noti').toggle();
e.stopPropagation();
});
$('.display_noti').click(function(e){
e.stopPropagation();
});
.display_noti {
width: 400px;
height: fixed;
display: none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clicker"> <a>Notification</a>
<div class="display_noti">
<ol> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br>
</ol>
</div>
</li>