当鼠标悬停在一个CSS上时，为其他卡片设置样式

Question

在我的网站的一部分，我有一组6张牌安排3x3使用flexbox，我希望它，所以当用户悬停在一张牌，所有其他将改变背景颜色或变暗(还没有决定)。这是我的文本的摘录，当我悬停在一个孩子，它改变了它之后的所有卡片，但我也希望它做之前的卡片(所以每其他卡，但自己!

下面是我的代码:

#page3container {
height: 70%;
width: 70%;
background: rgba(25, 25, 25, 0.8);
position: absolute;
margin: 0;
left: 15%;
top: 22%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
border-radius: 15px;
}
.page3card {
height: 40%;
width: 30%;
background: rgb(50, 71, 139);
border-radius: 15px;
box-shadow: 0 0 5px rgb(50, 71, 139);
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.card3Title {
height: 50px;
margin-top: 2%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.card3Title h3 {
font-family: 'Play';
width: 80%;
color: #d83a3a;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin: 0;
padding-left: 5%;
height: 50px;
background: red;
}
.card3Number {
width: 20%;
}
.card3Text {
color: white;
font-family: 'Play';
padding: 5px;
text-align: center;
}
.new {
background: rgb(88, 78, 215);
overflow: hidden;
transition: 0.5s;
}
.new:hover {
box-shadow: 0 0 7px rgb(88, 78, 215);
transition: 0.5s;
height: 42%
}
***.new:hover~.new {
background: red;
}
*** .cardnumber {
height: 100%;
width: 45%;
text-align: left;
color: rgba(255, 255, 255, 1);
font-size: 19vw;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.cardcontent {
height: 100%;
width: 60%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.cardcontent h1 {
color: white;
margin: 0;
text-align: center;
height: 40%;
padding: 0;
margin-top: 5%;
}
#inner {
height: 60%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
}
#inner img {
width: 8vw;
height: 8vw;
margin: 5%;
margin-bottom: 0;
object-fit: contain;
}
.cardcontent h1 {
width: 100%;
font-size: 2.2vw;
}

<div class="page3card new">
<div class="cardnumber">1</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Download Chrome</strong></h1>
<div id="inner"><img src="img/chrome-icon.webp" id="chrome"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">2</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Create an account</strong></h1>
<div id="inner"><img src="img/person-icon.png"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">3</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Link Devices</strong></h1>
<div id="inner"><img src="img/link-icon.png"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">4</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Block websites</strong></h1>
<div id="inner"><img src="img/stop-icon.svg"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">5</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>All set!</strong></h1>
<div id="inner"><img src="img/check-icon.svg"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">6</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>View reports</strong></h1>
<div id="inner"><img src="img/report-icon.png"></div>
</div>
</div>

Many thanks!

谢谢你:)

Answer 1

我不太明白你的意思。但是下面的代码使得当卡片悬停并且被选中的卡片变成红色时，其余的卡片变得苍白。

$('.page3card').on("mouseenter", function() {
$('.page3card').each(function() {
$(this).removeClass('active');
$(this).addClass('deactive');
});
$(this).removeClass('deactive');
$(this).addClass('active');
}).on("mouseleave", function() {
$('.page3card').each(function() {
$(this).removeClass('deactive');
$(this).removeClass('active');
});
});

#page3container {
height: 70%;
width: 70%;
background: rgba(25, 25, 25, 0.8);
position: absolute;
margin: 0;
left: 15%;
top: 22%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
border-radius: 15px;
}
.page3card {
height: 40%;
width: 30%;
background: rgb(50, 71, 139);
border-radius: 15px;
box-shadow: 0 0 5px rgb(50, 71, 139);
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.card3Title {
height: 50px;
margin-top: 2%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.card3Title h3 {
font-family: 'Play';
width: 80%;
color: #d83a3a;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin: 0;
padding-left: 5%;
height: 50px;
background: red;
}
.card3Number {
width: 20%;
}
.card3Text {
color: white;
font-family: 'Play';
padding: 5px;
text-align: center;
}
.new {
background: rgb(88, 78, 215);
overflow: hidden;
transition: 0.5s;
}
.new:hover {
box-shadow: 0 0 7px rgb(88, 78, 215);
transition: 0.5s;
height: 42%
}
***.new:hover~.new {
background: red;
}
*** .cardnumber {
height: 100%;
width: 45%;
text-align: left;
color: rgba(255, 255, 255, 1);
font-size: 19vw;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.cardcontent {
height: 100%;
width: 60%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.cardcontent h1 {
color: white;
margin: 0;
text-align: center;
height: 40%;
padding: 0;
margin-top: 5%;
}
#inner {
height: 60%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
}
#inner img {
width: 8vw;
height: 8vw;
margin: 5%;
margin-bottom: 0;
object-fit: contain;
}
.cardcontent h1 {
width: 100%;
font-size: 2.2vw;
}
.active
{
background:red;
}
.deactive{
opacity:.6;
background:#111;
}

<div class="page3card new">
<div class="cardnumber">1</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Download Chrome</strong></h1>
<div id="inner"><img src="img/chrome-icon.webp" id="chrome"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">2</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Create an account</strong></h1>
<div id="inner"><img src="img/person-icon.png"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">3</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Link Devices</strong></h1>
<div id="inner"><img src="img/link-icon.png"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">4</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>Block websites</strong></h1>
<div id="inner"><img src="img/stop-icon.svg"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">5</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>All set!</strong></h1>
<div id="inner"><img src="img/check-icon.svg"></div>
</div>
</div>
<div class="page3card new">
<div class="cardnumber">6</div>
<div class="cardcontent">
<h1 class="cardtitle"><strong>View reports</strong></h1>
<div id="inner"><img src="img/report-icon.png"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

根据我，这是不可能的，仅仅通过CSS，这里是如何通过使用javascript来实现它。并可根据您的需要进行修改或简化。

function changeColor(active){
if(active == "one"){
document.getElementById('two').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
document.getElementById('three').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
}else if(active == "two"){
document.getElementById('one').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
document.getElementById('three').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
}else if(active == "three"){
document.getElementById('two').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
document.getElementById('one').style.backgroundColor = "rgba(0, 0, 0, 0.5)";
}

}
function againChange(active){
if(active == "one"){
document.getElementById('two').style.backgroundColor = "blue";
document.getElementById('three').style.backgroundColor = "green";
}else if(active == "two"){
document.getElementById('one').style.backgroundColor = "red";
document.getElementById('three').style.backgroundColor = "green";
}else if(active == "three"){
document.getElementById('two').style.backgroundColor = "blue";
document.getElementById('one').style.backgroundColor = "red";
}
}

#parent #one, #two, #three{
width: 100px;
height: 100px;
margin: 10px;
transition: 0.2s linear;
}
#parent #one{ background-color: red}
#parent #two{ background-color: blue}
#parent #three{ background-color: green}

<html>
<head>
<title>Roshan</title>
</head>
<body>
<div id="parent">
<div id="one" onmouseover="changeColor('one')" onmouseout="againChange('one')"></div>
<div id="two" onmouseover="changeColor('two')" onmouseout="againChange('two')"></div>
<div id="three" onmouseover="changeColor('three')" onmouseout="againChange('three')"></div>
</div>
</body>
</html>

这在CSS中是不可能的，因为没有"先前的兄弟">