Как бы я постоянно применял CSS-переход/эффект к псевдо-элементу

ProgramBox

Как бы я постоянно применял CSS-переход/эффект к псевдо-элементу

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

Вопрос:

не уверен, что я использую совершенно неправильный метод для этого, но мне интересно, как бы я постоянно применял эффект при наведении, если бы элемент был нажат, но для псевдоэлемента.

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

Хотя я понимаю базовое добавление класса в jquery, я действительно не понимаю, как это сделать с псевдо-элементом.

Вот часть моего кода, вырванного из проекта, чтобы упростить фрагмент:

 body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator div {
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

 <div id="navigator">
      <div id="tes1" class="test"><h1 class="test-title">test1</h1></div>
      <div id="test2" class="test"><h1 class="test-title">testing2</h1></div>
      <div id="test3" class="test"><h1 class="test-title">testimus3</h1></div>
 </div>

Ответ №1:

Вам нужно добавить немного Javascript и CSS. Я сделал для вас фрагмент

 document.querySelectorAll('.test').forEach(element => {
  element.addEventListener('click', () => {
  document.querySelectorAll('.test').forEach(element2 => element2.classList.remove('active'))
    element.classList.add('active')
  })
})

 body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator div {
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover,
.test.active {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.test.active .test-title::after {
   transform: scaleX(1);
  transform-origin: 0% 50%;
}

.test.active > h1 {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

 <div id="navigator">
      <div id="tes1" class="test"><h1 class="test-title">test1</h1></div>
      <div id="test2" class="test"><h1 class="test-title">testing2</h1></div>
      <div id="test3" class="test"><h1 class="test-title">testimus3</h1></div>
 </div>

Ответ №2:

Вы можете сделать это, добавив скрытый переключатель к каждому элементу и применив стиль к его братьям и сестрам, если он установлен:

 body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator label { /* changed */
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.test > input:checked ~ .test-title::after, /* added */
.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

/* added */
.test > input
{
  display: none;
}

 <div id="navigator">
      <label id="tes1" class="test"><input type="radio" name="test"><h1 class="test-title">test1</h1></label>
      <label id="test2" class="test"><input type="radio" name="test"><h1 class="test-title">testing2</h1></label>
      <label id="test3" class="test"><input type="radio" name="test"><h1 class="test-title">testimus3</h1></label>
 </div>

При таком подходе будет немного сложно реализовать отображение соответствующей страницы для выбранной вкладки.
Для этого лучше переместить переключатели за пределы вкладок:

 body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

div#navigator label { /* changed */
  flex-grow: 1;
}

#navigator {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  /* backdrop-filter: blur(5px); */
}

.test-title{
  color: rgba(255, 255, 255, 1);
  font-size: 3.5em;
  text-align: center;
  user-select: none;
  transition: color 0.18s;
}

.test-title:hover {
  color: white;
}

.test-title::after{
  display: block;
  transition: transform ease 0.25s;
  content: "";
  margin: 0 15% 0 15%;
  text-align: center;
  border-bottom: solid 2px green;
  border-radius: 1px 1px 1px 1px;
  transform: scaleX(0);
  letter-spacing: 1px;
  transform-origin: 100% 0%;
}

.container > input:nth-child(1):checked ~ #navigator :nth-child(1) .test-title::after, /* added */
.container > input:nth-child(2):checked ~ #navigator :nth-child(2) .test-title::after, /* added */
.container > input:nth-child(3):checked ~ #navigator :nth-child(3) .test-title::after, /* added */

.test-title:hover::after{
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

/* added */
.container > input:nth-child(1):checked ~ #navigator :nth-child(1) .test-title::after,
.container > input:nth-child(2):checked ~ #navigator :nth-child(2) .test-title::after,
.container > input:nth-child(3):checked ~ #navigator :nth-child(3) .test-title::after
{
  border-bottom-color: red;
}

.container > input:nth-child(1):checked ~ #content :nth-child(1),
.container > input:nth-child(2):checked ~ #content :nth-child(2),
.container > input:nth-child(3):checked ~ #content :nth-child(3)
{
  display: initial;
}

#content > *,
.container > input
{
  display: none;
}

 <div class="container">
  <input id="test1" type="radio" name="samename">
  <input id="test2" type="radio" name="samename" checked>
  <input id="test3" type="radio" name="samename">
  <div id="navigator">
      <label for="test1" class="test"><h1 class="test-title">test1</h1></label>
      <label for="test2" class="test"><h1 class="test-title">testing2</h1></label>
      <label for="test3" class="test"><h1 class="test-title">testimus3</h1></label>
  </div>
  <div id="content">
    <div>Tab 1 content is</div>
    <div>Tab 2 content working</div>
    <div>Tab 3 content good</div>
  </div>
</div>

Это менее надежный подход и потребует изменения как HTML, так и CSS при добавлении большего количества вкладок/страниц.

Метки: Как бы я постоянно применял CSS-переход/эффект к псевдо-элементу

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Android WebView XMLHttpRequest Keepalive

Обращение к двусвязному списку не показывает первый узел на выходе

wxDialog работает нормально, но вызов wxFileDialog приводит к тому, что программа не завершается