[![при клике на .Card или .Link должен меняться фон (#e52e7a) у .Card, и .Card-ItemWeight плюс у .Promotion должен меняться текст плюс у Card-Heading должен меняться цвет текста. Вопрос: как это все сделать через jQuery? И как потом по клику по карточке отменить селект.
$('.Card').on('click', function() {
$(this).css('background-color', '#e52e7a');
});
* {
box-sizing: border-box;
}
.ContentContainer {
margin: auto;
width: 1280px;
height: 680px;
vertical-align: top;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.PageBackground {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%), url(../img/background.png);
background-color: #fff;
}
.Heading {
margin: 0;
padding-top: 36px;
font: 100 36px 'Exo 2.0 Thin', sans-serif;
color: #fff;
text-shadow: 0 1px 1px #000;
text-align: center;
}
.Container {
display: inline-block;
width: 320px;
height: auto;
margin-top: 23px;
margin-left: 80px;
border: 1px solid red;
vertical-align: top;
cursor: pointer;
}
.Card {
margin: 0;
width: 320px;
height: 480px;
background-color: #2ea8e6;
border-radius: 10px;
overflow: hidden;
position: relative;
-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
}
.Card::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 312px;
height: 472px;
border-radius: 10px;
background-color: #f2f2f2;
-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
z-index: 1;
}
.Card:hover, .Card:hover .Card-ItemWeight {
background-color: #e52e7a;
}
.Card-Heading {
position: relative;
font: 16px 'Trebuchet MS', sans-serif;
color: #666666;
margin: 0;
padding: 21px 0 0 51px;
z-index: 2;
}
.Card-Title {
position: relative;
font: 700 48px 'Trebuchet MS', sans-serif;
color: #000;
margin: 0;
padding: 6px 0 0 48px;
z-index: 3;
}
.Card-SubTitle {
position: relative;
font: 700 24px 'Trebuchet MS', sans-serif;
color: #000;
margin: 0;
padding: 0 0 0 51px;
z-index: 4;
}
.Card-Details {
position: relative;
font: 400 14px/16px 'Trebuchet MS', sans-serif;
color: #666666;
margin: 0;
padding: 15px 0 0 51px;
z-index: 5;
}
.Card-Details_font_bold {
font-weight: 700;
}
.Card-Image {
position: absolute;
bottom: 4px;
left: 4px;
z-index: 6;
}
.Card-ItemWeight {
position: absolute;
right: 16px;
bottom: 16px;
width: 80px;
height: 80px;
background-color: #2ea8e6;
border-radius: 50%;
z-index: 7;
}
.Card-ItemWeightText {
margin: 0;
padding-top: 24px;
text-align: center;
font: 400 42px/22px 'Trebuchet MS', sans-serif;
color: #fff;
}
.Card-ItemWeightText_font_s {
margin: 0;
padding: 0 30px;
font-size: 21px;
}
.Promotion {
margin: 0;
padding-top: 14px;
font: 13px 'Trebuchet MS', sans-serif;
color:#fff;
text-align: center;
word-wrap: break-word;
}
.Link {
font: 700 13px 'Trebuchet MS', sans-serif;
color: #22a7e9;
text-decoration: none;
border-bottom: 1px dashed;
text-align: center;
}
<body>
<div class="ContentContainer PageBackground">
<h1 class="Heading">Ты сегодня покормил кота?</h1>
<div class="Container">
<div class="Card">
<p class="Card-Heading">Сказочное заморское яство</p>
<h2 class="Card-Title">Нямушка</h2>
<h3 class="Card-SubTitle">с фуа-гра</h3>
<p class="Card-Details"><span class="Card-Details_font_bold">10</span> порций <br> мышь в подарок</p>
<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
<div class="Card-ItemWeight">
<p class="Card-ItemWeightText">0,5<br>
<span class="Card-ItemWeightText_font_s">кг</span>
</p>
</div>
</div>
<p class="Promotion Promotion-TextOne">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
</div>
<div class="Container">
<div class="Card">
<p class="Card-Heading">Сказочное заморское яство</p>
<h2 class="Card-Title">Нямушка</h2>
<h3 class="Card-SubTitle">с рыбой</h3>
<p class="Card-Details"><span class="Card-Details_font_bold">40</span> порций <br> <span class="Card-Details_font_bold">2</span> мыши в подарок</p>
<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
<div class="Card-ItemWeight">
<p class="Card-ItemWeightText">2<br>
<span class="Card-ItemWeightText_font_s">кг</span>
</p>
</div>
</div>
<p class="Promotion Promotion-TextTwo">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
</div>
<div class="Container">
<div class="Card">
<p class="Card-Heading">Сказочное заморское яство</p>
<h2 class="Card-Title">Нямушка</h2>
<h3 class="Card-SubTitle">с курой</h3>
<p class="Card-Details"><span class="Card-Details_font_bold">100</span> порций <br> <span class="Card-Details_font_bold">5</span> мышей в подарок <br> заказчик доволен</p>
<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
<div class="Card-ItemWeight">
<p class="Card-ItemWeightText">5<br>
<span class="Card-ItemWeightText_font_s">кг</span>
</p>
</div>
</div>
<p class="Promotion Promotion-TextThree">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js" defer></script>
</body>