Develop Reference

How do I change the contents of a CSS element after a :hover pseudo-element activates using JavaScript?

I currently have 2 boxes, one box that is red, and when my mouse hover overs it the box turns red. The other box is blue, and when my mouse hovers over the box it turns blue.
What I want to have happen is that when my mouse hovers over box 1 the box turns blue AND box 2 turns red. (Same idea with Box 2 but switch the colors
Here is the code that I tried already, I know that the issue is with the JavaScript but I don't understand why the JavaScript isn't working
const outlineOne = document.querySelector('.outlineOne');
const outlineOneHover = window.getComputedStyle(outlineOne, ':hover');
const outlineTwo = document.getElementsByClassName('outlineTwo')
if (outlineOneHover.style.background = blue) {
outlineTwo[0].style.backgroundColor = 'red';
};
body {
background: #2F2F2F
}
.outlineOne,
.outlineTwo {
display: inline-block;
background: #2F2F2F;
width: 100px;
height: 100px;
border: 2px solid black;
margin: 20px 20px;
}
.outlineTwo {
background: blue;
}
.outlineOne {
background: red;
}
.outlineOne:hover {
background: blue;
}
.outlineTwo:hover {
background: red;
}
<div class='parent'>
<div class="outlineOne"></div>
<div class="outlineTwo"></div>
</div>

You can toggle a single class on both objects on mouseover and mouseout.
const outlineOne = document.querySelector('.outlineOne');
const outlineTwo = document.querySelector('.outlineTwo');
function changeBG(){
outlineOne.classList.toggle("active");
outlineTwo.classList.toggle("active");
}
outlineOne.addEventListener("mouseover",changeBG);
outlineTwo.addEventListener("mouseover",changeBG);
outlineOne.addEventListener("mouseout",changeBG);
outlineTwo.addEventListener("mouseout",changeBG);
body {
background: #2F2F2F
}
.outlineOne,
.outlineTwo {
display: inline-block;
background: #2F2F2F;
width: 100px;
height: 100px;
border: 2px solid black;
margin: 20px 20px;
}
.outlineTwo {
background: blue;
}
.outlineOne {
background: red;
}
.outlineOne.active {
background: blue;
}
.outlineTwo.active {
background: red;
}
<div class='parent'>
<div class="outlineOne"></div>
<div class="outlineTwo"></div>
</div>

You have two options here:
Have a div that wraps both outlineOne and outlineTwo and have a :hover selector on that, and then no JavaScript is needed (like your parent div in your example)
.parent:hover .outlineOne {
background: blue;
}
.parent:hover .outlineTwo {
background: red;
}
Add a CSS class instead of adding :hover via JavaScript (so like .outlineOne.addedClass { background: blue; }, and listen for a mouseover event in JavaScript.
Technically you're not supposed to manually add a :hover to an element manually because it's a trusted event that should be user-activated.

Queue on click function

I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!

A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>

How can I set a temporary padding?

Note: I guess the title of my question is nothing to do with my real question (kinda).
Here is my code:
.one{
background-color: gray;
}
.two{
padding: 20px;
}
<div class = "one">
<div class = "two">
<span>something</span>
</div>
</div>
<br>
<div class = "one">
<span>something</span>
</div>
I need to manage it how those two blocks look like the same. In reality, div.two isn't exist in the first of time and it will be added after a while. So I want to keep the UI without any change when div.two appends. How can I do that?
In conclusion, I need to have the same look for both div.one elements at the same time. Is that possible? (noted that I want to both of them be like the first one)

Is it possible to use visibility: hidden; instead of appending a new one? Instead of appending just change to visibility: visible;
.one{
background-color: gray;
}
.two{
visibility: hidden;
padding: 20px;
}
https://jsfiddle.net/Hastig/bx2kwjmw/
Alternatively can you add padding to the parent element instead...
.one{
background-color: gray;
padding: 20px;
}
.two{
}
https://jsfiddle.net/Hastig/bx2kwjmw/1/
Edit, I was playing around with this some more and saw that the padding on parent div isn't a solution as once you insert text the height still increases because of that text size.
Here's a new fiddle showing how to put in invisible ghost text as a placeholder for sizing, then remove it when you append content with your plugin.
It's just one idea, should be lots of ways to go about it..
https://jsfiddle.net/Hastig/bx2kwjmw/5/
$('.plugin-append-simulator').click(function() {
var content = '<div class="two">something</div>';
$('.one').html('').append(content);
});
// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content
.one {
background-color: gray;
padding: 20px;
color: hsla(0, 0%, 0%, 0);
}
.two {
color: hsla(0, 0%, 0%, 1);
}
/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>
<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>
older version that toggles padding from parent to child..
https://jsfiddle.net/Hastig/bx2kwjmw/6/

Change where the padding is applied....
.one{
background-color: gray;
padding: 20px;
}
.two{
padding: 0; /* setting this to 0 should override any previous padding declarations*/
}

closing a jquery popup when a element is already active

I got quite a bit of help from another great user on this site already, am curious if someone could help with one more question on this code.
this is essentially where I am at.
one hovers the gray boxes to highlight an element on the screen. when one gray element is clicked a blue box appears, and the highlighted element stays as well. if the new blue element is clicked, the red box goes away and the blue box go away, and the hovers function accordingly after. if one element is active, and I want to click the other gray element, currently, another new element pops in, giving me two blue boxes. I only want the corresponding blue box active at a time. so if element 1 blue box is active, I want to click element 2, and deactivate blue box 1, while activating blue box 2.
here is I am currently at
html
<div class="bg">1</div>
<div class="bg2">1</div>
<div class="bgpopup">1</div>
<div class="bg">2</div>
<div class="bg2">2</div>
<div class="bgpopup">2</div>
css
.bg {
background: #ccc;
width: 200px;
height: 120px;
}
.bg:hover {
background: #000;
}
.bg2 {
position:absolute; top:250px;
left:250px;
background: red;
width: 200px;
height: 120px;
display:none;
}
.bgpopup {
background: blue;
width: 200px;
height: 120px;
display:none;
}
script
$(".bg").each(function(){
var $bg = $(this);
var $bg2 = $bg.nextAll('.bg2:first');
var $bgP = $bg.nextAll('.bgpopup:first');
$bg.data("activated", 0).hover(function(){
if($bg.data("activated") === 0) $bg2.toggle();
}).click(function(){
$bg.data("activated", 1);
$bgP.show().on("click", function(){
$bg.data("activated", 0);
$bg2.add( this ).hide();
});
});
});
with link http://jsfiddle.net/skinnyb/0vvk945y/8/

In that case and knowing that the HTML will not be changed in the future (cause the order is important!) I'd do it almost all using CSS's + next-sibling selector.
Regarding jQuery i'd keep it at the minimum and use it exclusively to toggle CSS classes:
var $bg = $(".bg"); // Cache all buttons
$(".bg").on("click", function(){
$bg.removeClass("active");
$(this).addClass("active");
});
$(".blue").on("click", function(){
$bg.removeClass("active");
});
.bg {
background: #ccc;
margin-top: 10px;
width: 200px;
height: 120px;
transition:0.3s;
}
.bg:hover {
background: #000;
}
.red {
position: absolute;
top: 250px;
left: 250px;
background: red;
width: 200px;
height: 120px;
visibility:hidden;
transition: 0.3s;
cursor:pointer;
opacity: 0;
}
.bg:hover + .red{
visibility: visible;
z-index:2; /* prioritize (overlay) hovered - over active ones*/
opacity: 1;
}
.bg.active + .red{
visibility: visible;
z-index:1; /* keep below hovered ones */
opacity: 1;
}
.bg.active + .red + .blue{
display: block;
}
.blue {
background: blue;
width: 200px;
height: 120px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">1</div>
<div class="red">1</div>
<div class="blue">1</div>
<div class="bg">2</div>
<div class="red">2</div>
<div class="blue">2</div>
PS: I've used other classNames to prevent headaches. Usually a popup shows at the screen center, not below some other element like you did... Feel free to edit my classes as you need.

Try hiding both blue's before one appears to ensure there is only one at a time:
jsfiddle.net/2sxy9mzw/
All I did was added one line before $bg.data("activated", 1);
which was:
$('.bgpopup').hide();

Struggling to understand jquery - Fade in/out a class on mouseover

I'm currently trying to learn jQuery and JavaScript, and for my navigation I'm trying to make it look underlined on mouseover which, although it might not be the cleaned of code, I have managed to do it using a addClass and removeClass.
I am now trying to make the underline class fade in and fade out, which I believe is something normally done with CSS3 but due to just trying to learn jquery, I've been trying to figure it out.
I've tried putting .fadeIn() and .fadeOut() in different places in the code, but nothing seems to work, so I'm assuming this is not the correct way to do it.
Here's my code
HTML
<div class="navleft">
<ul>
<li class="active">Home</li>
<li class="active1">Dealerships</li>
<li class="active1">Contact</li>
</ul>
</div>
CSS
.navleft ul li.active1 {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
.navleft ul li.active {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
Javascript
$(function(){
$('.navleft ul li').removeClass('active1');
$('.navleft ul li').mouseover(function(){
$(this).addClass('active1');
});
$('.navleft ul li').mouseout(function(){
$(this).removeClass('active1');
})
});
If anyone could help, that would be great, as I'm really stuck on this one.

Classes can't fade in or out. fadeIn and fadeOut are for the opacity of elements. If you actually want to ›fade‹ a style you have to either write your own animation code (which I wouldn't recommend) or use CSS3 transitions, which I would recommend anyways.

Here's a CSS way to smoothly transition from one border to another on hovering: http://jsfiddle.net/u4h7k/2/.
HTML:
<ul id = "nav">
<li>Home</li>
<li>Dealerships</li>
<li>Contact</li>
</ul>
CSS:
#nav > li {
position: relative;
cursor: pointer;
}
#nav > li:before, #nav > li:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid blue;
opacity: 0;
-webkit-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
#nav > li:after {
border-bottom: 1px solid red;
opacity: 1;
}
#nav > li:hover:after {
opacity: 0;
}
#nav > li:hover:before {
opacity: 1;
}