Changing z-index with js [duplicate]
up vote
2
down vote
favorite
This question already has an answer here:
Why does z-index not work?
5 answers
I have a problem with a z-index change with js:
I have a bunch of cards
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
and I change some properties with js:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}
If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem
I am not an expert in js so if something is horribly wrong point it out but don't be mean.
I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.
I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")
I am out of ideas... P.S. not allowed to use jQuery or another external library.
EDIT code snippet:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>javascript html css
asked yesterday
Dddsasul
357
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
yesterday
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 3 more comments
up vote
2
down vote
favorite
This question already has an answer here:
Why does z-index not work?
5 answers
I have a problem with a z-index change with js:
I have a bunch of cards
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
and I change some properties with js:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}
If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem
I am not an expert in js so if something is horribly wrong point it out but don't be mean.
I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.
I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")
I am out of ideas... P.S. not allowed to use jQuery or another external library.
EDIT code snippet:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>javascript html css
asked yesterday
Dddsasul
357
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
yesterday
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them withelement.classList.add(),element.classList.remove()andelement.classList.toggle().
– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
CSS Overrides!importantwill override all inline styles set on the element.
– pmkro
yesterday
@ScottMarcus I wasn't. Its in his.cardclass. Its what's causing the issue.
– pmkro
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday
|
show 3 more comments
up vote
2
down vote
favorite
up vote
2
down vote
favorite
This question already has an answer here:
Why does z-index not work?
5 answers
I have a problem with a z-index change with js:
I have a bunch of cards
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
and I change some properties with js:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}
If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem
I am not an expert in js so if something is horribly wrong point it out but don't be mean.
I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.
I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")
I am out of ideas... P.S. not allowed to use jQuery or another external library.
EDIT code snippet:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>javascript html css
asked yesterday
Dddsasul
357
This question already has an answer here:
Why does z-index not work?
5 answers
I have a problem with a z-index change with js:
I have a bunch of cards
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
and I change some properties with js:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}
If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem
I am not an expert in js so if something is horribly wrong point it out but don't be mean.
I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.
I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")
I am out of ideas... P.S. not allowed to use jQuery or another external library.
EDIT code snippet:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>This question already has an answer here:
Why does z-index not work?
5 answers
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text
</div>
</div>javascript html css
javascript html css
asked yesterday
Dddsasul
357
asked yesterday
Dddsasul
357
edited yesterday
asked yesterday
Dddsasul
357
asked yesterday
Dddsasul
357
asked yesterday
Dddsasul
357
357
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
yesterday
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
yesterday
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them withelement.classList.add(),element.classList.remove()andelement.classList.toggle().
– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
CSS Overrides!importantwill override all inline styles set on the element.
– pmkro
yesterday
@ScottMarcus I wasn't. Its in his.cardclass. Its what's causing the issue.
– pmkro
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday
|
show 3 more comments
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them withelement.classList.add(),element.classList.remove()andelement.classList.toggle().
– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
CSS Overrides!importantwill override all inline styles set on the element.
– pmkro
yesterday
@ScottMarcus I wasn't. Its in his.cardclass. Its what's causing the issue.
– pmkro
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with
element.classList.add(), element.classList.remove() and element.classList.toggle().– Scott Marcus
yesterday
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with
element.classList.add(), element.classList.remove() and element.classList.toggle().– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
CSS Overrides
!important will override all inline styles set on the element.– pmkro
yesterday
CSS Overrides
!important will override all inline styles set on the element.– pmkro
yesterday
@ScottMarcus I wasn't. Its in his
.card class. Its what's causing the issue.– pmkro
yesterday
@ScottMarcus I wasn't. Its in his
.card class. Its what's causing the issue.– pmkro
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday
|
show 3 more comments
1 Answer
1
active
oldest
votes
up vote
4
down vote
accepted
z-index only works on positioned elements. You are using float, which isn't the same thing.
The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.
From MDN:
The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
Add position:relative to the .card class.
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>answered yesterday
Scott Marcus
37.8k51936
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
accepted
z-index only works on positioned elements. You are using float, which isn't the same thing.
The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.
From MDN:
The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
Add position:relative to the .card class.
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>answered yesterday
Scott Marcus
37.8k51936
add a comment |
up vote
4
down vote
accepted
z-index only works on positioned elements. You are using float, which isn't the same thing.
The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.
From MDN:
The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
Add position:relative to the .card class.
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>answered yesterday
Scott Marcus
37.8k51936
add a comment |
up vote
4
down vote
accepted
up vote
4
down vote
accepted
z-index only works on positioned elements. You are using float, which isn't the same thing.
The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.
From MDN:
The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
Add position:relative to the .card class.
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>answered yesterday
Scott Marcus
37.8k51936
z-index only works on positioned elements. You are using float, which isn't the same thing.
The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.
From MDN:
The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.
Add position:relative to the .card class.
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
setTimeout(1000);
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].onmouseover = function()
{
cards[i].style.zIndex = "9";
cards[i].style.transform = "scale(1.1)";
}
cards[i].onmouseout = function()
{
cards[i].style.zIndex = "-1";
cards[i].style.transform = "scale(1)";
}
}
}image { width:200px; }
.card
{
background: rgb(70, 70, 70);
width: 200px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1;
position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
width: 300px;
}
.card-title
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.card-text
{
margin-top: 5px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>
<div class="card">
<img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
<div class="card-title">
Consoles
</div>
<div class="card-text">
some random text some random text some random text some random text some random text some random text some random text some random
</div>
</div>answered yesterday
Scott Marcus
37.8k51936
edited yesterday
answered yesterday
Scott Marcus
37.8k51936
answered yesterday
Scott Marcus
37.8k51936
answered yesterday
Scott Marcus
37.8k51936
37.8k51936
add a comment |
add a comment |
It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with
element.classList.add(),element.classList.remove()andelement.classList.toggle().– Scott Marcus
yesterday
Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday
CSS Overrides
!importantwill override all inline styles set on the element.– pmkro
yesterday
@ScottMarcus I wasn't. Its in his
.cardclass. Its what's causing the issue.– pmkro
yesterday
Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday