Обновлено: цель в javascript
У меня есть это в CSS:
#box:target {
box-shadow: 0px 0px 20px black;
}
На «родительской» странице (page1) у меня есть кнопка, которая заставляет вас перейти на другую страницу: «page2.html#box». Таким образом, #box:target применяется, когда я загружаю страницу.
Но с помощью кнопки на странице1 я активирую функцию, целью которой является изменение свойств #box:target. Я ищу способ изменить это в javascript. Не :focus.
Ваш вопрос довольно неясен. :target имеет отношение ничего такого к фокусировке. Вы спрашиваете о фокусировании или таргетинге?
Можете ли вы просто использовать псевдокласс :focus с другим стилем developer.mozilla.org/en-US/docs/Web/CSS/:focus?
Я бы предложил использовать :focus или :hover. Если вы хотите более плавную анимацию и избежать перекрашивать, я бы предложил установить дополнительную тень на псевдоэлементы :before и анимировать ее (см. Как анимировать box-shadow)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Notice to Readers
This Answer Concerns the Original Post First Draft
ОП был отредактирован на совершенно другой вопрос. Поэтому, если этот ответ сбивает с толку, вам нужно просмотреть изменения. Я прошу прощения за неудобства.
:target
Вам не нужен JavaScript для простого переключения стилей. Похоже, вы неправильно поняли требования, необходимые для реализации :target псевдокласса.
Требования
Два тега
<a>nchor и тег любого типа в качестве цели.<a>ON</a> <a>OFF</a> <section>SECTION</section>One
<a>will "turn on" the new<section>style and the other<a>will "turn it off".Затем
<section>нужен#id. Оба<a>нуждаются в атрибутеhref. Значения каждогоhrefотличаются от других и специфичны (см. комментарий ниже этого примера):<a href = "">ON</a> <a href = "">OFF</a> <section id = "S">SECTION</section>ON: Must be ☝ OFF: Must be a ☝
the #id of target:#S"non-jumping" value#/В CSS добавьте два набора правил:
- Первый — это целевой тег по умолчанию (ВЫКЛЮЧЕННЫЙ):
#S { width: 44vw; height: 44vw; border: 4px solid #444 } - Второй — активированный целевой тег (НА). Суффикс псевдокласса
:target:#S:target { text-shadow: 4px 4px 4px 4px #444; }
- Первый — это целевой тег по умолчанию (ВЫКЛЮЧЕННЫЙ):
Вот как примерно должен выглядеть HTML-макет:
<a href = "#S">ON</a> <a href = "#/">OFF</a> <section id = "S">SECTION</section>
Демо
html,
body {
font: 900 10vh/1 Consolas;
}
a {
color: blue;
}
a:hover,
a:active {
color: cyan;
}
#B {
box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
border: 6px inset rgba(0, 0, 0, 0.8);
width: 40vw;
height: 40vh;
font-size: 20vh;
text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}
#B:target {
box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}<a href = "#B" class='on'>ON_</a><a href = "#/" class='off'>OFF</a>
<figure id='B' class='box'>
<figcaption>BOX</figcaption>
</figure>Я думаю, вы неправильно поняли мой вопрос. Я просто хочу изменить правила css, когда элемент нацелен, изменить, например, свойство boxShadow. Я прекрасно знаю, для чего нужен :target.
Я абсолютно не задавал другого вопроса. Ты просто совсем не понимаешь, чего я хочу
Объясните мне, что должен делать .box:target и почему в первой версии поста нет упоминания о дочерней или родительской странице? Что касается самой последней версии, почему вы изменили .box:target на #box:target? Также какое значение имеет родительская и дочерняя страницы, если их нет? Также что случилось с функцией из первой версии, почему ее нет в текущей версии? Я, наверное, не понимаю, но похоже, что никто другой тоже -- вы читали комментарии?
Извините, что я не освоил HTML в совершенстве, есть люди, которые учатся, вы знаете. Так ты не можешь просто быть нормальным, пожалуйста, и объясни мне?
И :target используется, когда элемент нацелен на его идентификатор с помощью тега a с href = "#element"
box-shadow property, after activate a functionможно пожалуйста поподробнее