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.

Webkit scrolling too much?

I have some content which can have only specific height (no more), and I added some scroll on that content.
This is my CSS:
.value {
max-height: 60px;
overflow-y: auto;
color: black;
font-size: 16px;
}
/* width */
.value::-webkit-scrollbar {
width: 3px;
}
/* Track */
.value::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(163, 163, 163);
border-radius: 5px;
}
/* Handle */
.value::-webkit-scrollbar-thumb {
background: linear-gradient(60deg, #b95aca, #8c15ad);
border-radius: 5px;
}
And This is my Subtitle content:
<div
class="value"
*ngIf="courseData.sub_title"
> {{courseData.sub_title}}
</div>
This is the image:
So, when I want to scroll down or up using mouse wheel it's scrolling too much and user can not be able read full text (part of text was going up or down with scrolling).
How can I change scroll step?

How to change ant-design Tabs default border color

I can't change the default border color of antd Tabs.
Tabs with Default border:
What I want is this:
somehow, I was able to achieve this but it's not responsive, it takes more time.
It messed up with the mobile screen, etc.
...
/* rest of css in codesandbox, https://codesandbox.io/s/so-change-antd-tabs-default-border-color-40gmb?file=/index.css */
...
.ant-tabs-content-holder {
border-width: 1px;
border-color: grey;
border-style: solid;
padding: 1rem;
background: white;
position: relative;
}
.ant-tabs-content-holder:after {
padding: 0;
margin: 0;
display: block;
content: '';
height: 1.1px;
position: absolute;
top: -1px;
left: 0%;
width: 24.8%;
background-color: white;
}
This is how it looks on the Mobile screen. I think I can use many breakpoints for different screen width and change the percentage of left and width in .ant-tabs-content-holder:after but it's tedious.
How to achieve this in a simpler way? Any idea? is there any ant design vars for tabs border that I can use with webpack or less? antd docs has style props for it? I will appreciate your help.
Check out code: codesandbox

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { /* For tabs border */
border-color: black;
}
.ant-tabs-top > .ant-tabs-nav::before { /* For the line to the right and close to the tabs */
border-color: black;
}
.ant-tabs > .ant-tabs-nav { /* So that there is no gap between the content and tabs */
margin-bottom: 0;
}
.ant-tabs-content-holder {
padding: 15px;
border: 1px solid black; /* Border for the content part */
border-top: transparent; /* Remove the top border so that there is no overlap*/
}
You just need to override the above 4 classes to achieve your layout:
CodeSandbox Demo
Output:

Just tried overriding existing borders(with same selectors) seems does the job.
https://codesandbox.io/s/so-change-antd-tabs-default-border-color-forked-tkg3h?file=/index.css

Responsive nav not appearing as intended

I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.
Here is an image of how it looks when window is maximized:
Here is an image when the window is resized:
Here is an image of what I want the page to look and function like:
Issues:
As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
When menuis clicked, I want the nav to dynamically display the other links.
Here is what I have tried so far: https://jsfiddle.net/hudnybux/

Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.
<div id="header-main">
<div id="nav-trigger"><span>Menu</span></div>
<nav id="main-navigation" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
<!--<nav id="nav-mobile"></nav>-->
</div>
Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0.
width: 0;
height: 0;
Edit:
I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp. You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.
https://jsfiddle.net/qnco3x7e/8/

You will need to add another media query
#media all and (max-width: 460px) {
nav#main-navigation li {
display:block;
border-bottom: 1px solid #fafafa;
}
}

You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!
The Strategy
Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
Show everything by default; use display: none only on screen sizes you don't want to show something on.
JSFiddle
$(document).ready(function() {
$("#main-nav-mobile-trigger span").click(function() {
$(this).toggleClass("open");
if ($(this).hasClass("open")) {
$("#main-nav").addClass("open").slideDown(250);
} else {
$("#main-nav").removeClass("open").slideUp(250);
}
});
});
.pageOverlay {
width: 900px;
margin: 0 auto;
}
/******************/
nav {
background-color: #fefefe;
/*NAV COLOUR*/
padding: 10px 0;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
nav ul li a {
color: #a4a4a5;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
padding: 0 2px;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: white;
padding: 10px 20px;
}
/****************************************************************/
/* Menu CSS which pops up when window is resized */
#main-nav-mobile-trigger {
text-align: center;
}
#main-nav-mobile-trigger span {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
text-transform: uppercase;
}
#main-nav-mobile-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #e3e3e3;
border-right: solid 10px transparent;
}
#main-nav-mobile-trigger span:hover {
background-color: #e3e3e3;
}
#main-nav-mobile-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent;
}
#media all and (min-width: 901px) {
#top-nav {
text-align: right;
}
#main-nav {
text-align: left;
}
#main-nav-mobile-trigger {
display: none;
}
}
#media all and (max-width: 900px) {
#main-nav:not(.open) {
display: none;
}
#main-nav ul {
display: block;
}
#main-nav li {
display: block;
border-bottom: solid 1px #e3e3e3;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav a {
padding: 10px 30px;
}
#main-nav a:hover {
background-color: #e3e3e3;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
<nav id="top-nav" role="navigation">
<ul>
<li>Join / Log In</li>
<li>Help</li>
<li>Shop</li>
</ul>
</nav>
<div id="main-nav-mobile-trigger"><span>Menu</span></div>
<nav id="main-nav" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
</div>
<!-- pageOverlay closed-->
The HTML
I removed your container <div>s (#header and #header-main), as they serve no purpose as far as layout is concerned.
There are now only three parts to the header area. In order they are:
#top-nav - Join/Login, Help, Shop
#main-nav-mobile-trigger - MENU button
#main-nav - Stretches, Mobility, Posture
The JavaScript
When the MENU button (#main-nav-mobile-trigger span) is clicked:
Toggle its .open class.
If it has the .open class,
Add #main-nav's .open class.
Otherwise,
Remove #main-nav's .open class.
The CSS
You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation, which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav. Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
For big screen widths (#media all and (min-width: 901px)):
Align #top-nav to the right and #main-nav to the left.
Hide the MENU button.
For small screen widths (#media all and (max-width: 900px)):
If #main-nav doesn't have the .open class, hide it.
Display the menu items in #main-nav horizontally.
I hope this helps you. Best of luck with your future adventures in front-end development!

CSS mask on element w/ no image?

The Problem:
I have a set of "tabs" for navigation that I want to add a "mask" class to the tab that is active..My goal is to reveal the BODY's background color and/or background image of the page, but only with this "active" tab. Since the body's background page is dynamic and always changing, I can't simply add a background color to the "active tab" and call it a day. I have to use a different technique (javascript is last resort, I want to do this w/ CSS only).
Requirments:
I can't use an image for the mask because the "tab"
widths are css displayed w/ flexbox and stretch across the page.
I have to use a solution that masks ELEMENTS only... In this case:
<div class="mask"></div>
I can't rearrange the HTML structure below.. I have to work w/
this layout.
Is this possible w/ the css mask or is there a better way to achieve this with a different css technique?
Fiddle: https://jsfiddle.net/oneeezy/7mj8voL8/
CODE:
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Body */
body { background-color: rgb(0, 121, 191); }
/* Header */
h1 { color: white; }
header { background-color: rgba(0,0,0, .15); padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }
/* Mask (without image?) */
header nav div.mask { background: rgba(0,0,0, .1); } /* Can mask reveal background color? */
/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }
<header>
<h1>Logo</h1>
<nav>
<div class="mask">Link (mask)</div>
<div class="">Link</div>
<div class="">Link</div>
</nav>
</header>
<main>
<h2>CSS Masking</h2>
<p>Possible to css mask without an image? Hmmmmmm.......</p>
<p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>

If there is always an active element , and only one active element, you can set a shadow on it that gets the desired effect (instead of the background on the header)
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Body */
body { background: repeating-linear-gradient(90deg, lightblue 0px, lightgreen 100px); }
/* Header */
h1 { color: white; }
header { padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }
/* create a shdow on the underlying element, reset the default bkg */
header nav div.mask {
box-shadow: 0px -1000px 0px 1000px rgba(0,0,0, .1);
background-color: transparent;
}
/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }
<header>
<h1>Logo</h1>
<nav>
<div class="mask">Link (mask)</div>
<div class="">Link</div>
<div class="">Link</div>
</nav>
</header>
<main>
<h2>CSS Masking</h2>
<p>Possible to css mask without an image? Hmmmmmm.......</p>
<p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>