Как изменить цвет фона псевдокласса, если на него нажать? - PullRequest
Новая
       9

Как изменить цвет фона псевдокласса, если на него нажать?

0 голосов
/ 04 марта 2020

Я хочу изменить цвет точек, если они нажаты. Точка должна иметь предыдущий цвет, если щелкнуть другую точку. Я попытался сделать это с JavaScript, однако невозможно изменить CSS псевдокласса с JavaScript. Затем я попробовал с CSS. 

.h-timeline-point:focus-within::before {
  background-color: #002776;
  border-color: #002776;
}

Это мне не помогло. Любое предложение? 

<div class="h-timeline-container">
<ol class="h-timeline-wrap">
  <li class="h-timeline-point"><span class="point-text">
    1
    </span><span class="point-arrow-shade" style="display: block;">&nbsp;</span> <span class="point-arrow" style="display: block;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: block;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    2
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    3
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
  <li class="h-timeline-point"><span class="point-text">
    4
    </span><span class="point-arrow-shade" style="display: none;">&nbsp;</span> <span class="point-arrow" style="display: none;">&nbsp;</span>
  </li>
  <span class="point-details" style="display: none;">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </span>
</ol>


.h-timeline-icons {
  margin-left: -4px;
  font-size: 23px;
}

.h-timeline-container {
  min-height: 320px;
  margin: 30px 0;
}

h-wrapper {
  position: relative;
}

ol.h-timeline-wrap {
  position: relative;
  margin: 0;
  justify-content: space-around;
  display: flex;
  height: 1px;
  background: #d4d4d4;
}

ol.h-timeline-wrap::before {
  left: -5px;
}

ol.h-timeline-wrap::after {
  right: -10px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #9b2;
  border-radius: 3px;
}


/* ---- Timeline elements ---- */

li.h-timeline-point {
  position: relative;
  top: -10px;
  display: block;
  float: left;
  width: 150px;
  font: bold 14px arial;
}

li.h-timeline-point::before {
  content: "";
  position: relative;
  top: -10px;
  left: -4px;
  display: block;
  width: 40px;
  height: 40px;
  z-index: 0;
  border: 4px solid #009FDA;
  border-radius: 50%;
  background: #009FDA;
}

.point-text {
  right: -9px;
  z-index: 2;
  font-size: 25px;
  top: -44px;
  position: relative;
  font-weight: normal;
  color: white;
}


/* ---- Details ---- */

.point-details {
  position: absolute;
  right: 11%;
  top: 47px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #002776;
  font-size: 16px;
  background: #fff;
  color: black;
  font-weight: normal;
  width: 86%;
}


/* ---- Hover effects ---- */

.point-text:hover {
  cursor: pointer;
}

.point-arrow {
  content: "";
  position: absolute;
  left: -4px;
  top: 39px;
  display: none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #002776;
}

.point-arrow-shade {
  display: block;
  top: 41px;
  border-bottom: 20px solid #ffffff;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width: 0;
  height: 0;
  left: -4px;
  content: "";
  z-index: 2;
}

.h-timeline-point:hover::before {
  background-color: #002776;
  border-color: #002776;
}

.h-timeline-point:focus-within::before {
  background-color: #002776;
  border-color: #002776;
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {
  li.h-timeline-point {
    width: 75px;
  }
}

@media only screen and (max-width: 500px) {
  .h-timeline-container {
    min-height: 520px;
  }
  li.h-timeline-point {
    width: 65px;
  }
  .point-details {
    right: 4%;
    width: 90%;
  }
}

$('.point-text').on('click', function () {
  $('.point-details, .point-arrow, .point-arrow-shade').css('display', 'none');
  if ($(this).parent().next().css('display') == 'none') {

    $(this).parent().next().css('display', 'block');
    $(this).siblings('.point-arrow').css('display', 'block');
    $(this).siblings('.point-arrow-shade').css('display', 'block');
  }
});

$('.point-text').first().click();
...